การสร้าง Pagination ด้วย Tailwind CSS

ในบทความนี้ เราจะมาเรียนรู้วิธีการสร้าง Pagination ที่สวยงามและใช้งานได้จริงด้วย Tailwind CSS Pagination เป็นส่วนประกอบสำคัญในการนำทางข้อมูลจำนวนมาก โดยแบ่งออกเป็นหน้าต่างๆ เพื่อให้ผู้ใช้งานสามารถค้นหาสิ่งที่ต้องการได้อย่างง่ายดาย เราจะครอบคลุมตั้งแต่โครงสร้าง HTML พื้นฐาน การปรับแต่งด้วย Tailwind CSS และการใช้ JavaScript เพื่อจัดการ active page

โครงสร้าง HTML พื้นฐานสำหรับ Pagination

เริ่มต้นด้วยโครงสร้าง HTML พื้นฐานสำหรับ Pagination โดยเราจะใช้ <nav> เพื่อห่อ Pagination และใช้ <ul> เพื่อแสดงรายการของหน้าต่างๆ แต่ละหน้าจะถูกแสดงด้วย <li> และ <a>

<nav aria-label="Page navigation">
  <ul class="inline-flex -space-x-px text-sm">
    <li>
      <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
    </li>
    <li>
      <a href="#" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 bg-blue-50 border border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
    </li>
    <li>
      <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
    </li>
  </ul>
</nav>

โค้ดนี้สร้าง Pagination ที่มีปุ่ม "Previous", หน้า 1-5 และปุ่ม "Next" โดยหน้า 3 ถูกกำหนดให้เป็นหน้า active ด้วย aria-current="page" และ class ที่แตกต่างกัน

การปรับแต่งด้วย Tailwind CSS

Tailwind CSS ช่วยให้เราปรับแต่ง Pagination ได้อย่างง่ายดาย โดยเราสามารถใช้ utility classes เพื่อปรับแต่งสี ขนาด รูปทรง และอื่นๆ ได้ตามต้องการ

ตัวอย่างการปรับแต่ง:

สี: เปลี่ยนสีพื้นหลังและสีตัวอักษรของปุ่มต่างๆ โดยใช้ classes เช่น bg-blue-500, text-white, hover:bg-blue-700
ขนาด: ปรับขนาดของปุ่มโดยใช้ classes เช่น px-4, py-2
รูปทรง: ปรับรูปทรงของปุ่มโดยใช้ classes เช่น rounded-md, rounded-l-lg, rounded-r-lg
Border: ปรับแต่งเส้นขอบโดยใช้ classes เช่น border, border-gray-300
Spacing: ปรับระยะห่างระหว่างปุ่มโดยใช้ classes เช่น -space-x-px

ตัวอย่างโค้ดที่ปรับแต่ง:

<nav aria-label="Page navigation">
  <ul class="inline-flex items-center -space-x-px text-base">
    <li>
      <a href="#" class="block px-4 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </li>
    <li>
      <a href="#" class="px-4 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
    </li>
    <li>
      <a href="#" class="px-4 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
    </li>
    <li>
      <a href="#" aria-current="page" class="z-10 px-4 py-2 leading-tight text-blue-600 bg-blue-50 border border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
    </li>
    <li>
      <a href="#" class="px-4 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
    </li>
    <li>
      <a href="#" class="px-4 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
    </li>
    <li>
      <a href="#" class="block px-4 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Next</span>
        <svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </li>
  </ul>
</nav>

ในตัวอย่างนี้ เราได้เพิ่มไอคอนลูกศรสำหรับปุ่ม "Previous" และ "Next" โดยใช้ SVG และเพิ่ม class items-center เพื่อจัดกึ่งกลางแนวตั้ง

การจัดการ Active Page ด้วย JavaScript

เพื่อให้ Pagination ทำงานได้อย่างถูกต้อง เราต้องใช้ JavaScript เพื่อจัดการ active page เมื่อผู้ใช้งานคลิกที่หน้าต่างๆ

แนวคิด:

เมื่อผู้ใช้งานคลิกที่หน้าใดหน้าหนึ่ง เราจะลบ class ที่แสดงว่าเป็น active page ออกจากหน้าเดิม
เพิ่ม class ที่แสดงว่าเป็น active page ให้กับหน้าที่ถูกคลิก
อัปเดต aria-current="page" attribute ให้กับหน้าที่ active

ตัวอย่างโค้ด JavaScript:

const paginationLinks = document.querySelectorAll('nav ul li a');

paginationLinks.forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault();

    // Remove active class from all links
    paginationLinks.forEach(link => {
      link.classList.remove('z-10', 'bg-blue-50', 'border-blue-300', 'text-blue-600', 'dark:border-gray-700', 'dark:bg-gray-700', 'dark:text-white');
      link.removeAttribute('aria-current');
    });

    // Add active class to the clicked link
    link.classList.add('z-10', 'bg-blue-50', 'border-blue-300', 'text-blue-600', 'dark:border-gray-700', 'dark:bg-gray-700', 'dark:text-white');
    link.setAttribute('aria-current', 'page');
  });
});

โค้ดนี้จะเลือกทุก <a> ภายใน <nav> และเพิ่ม event listener เมื่อมีการคลิก เมื่อคลิกแล้ว จะลบ class ที่แสดงว่าเป็น active page และ aria-current ออกจากทุก link จากนั้นจะเพิ่ม class และ aria-current ให้กับ link ที่ถูกคลิก

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

จำนวนหน้า Pagination ที่ไม่แน่นอน: ในกรณีที่จำนวนหน้า Pagination เปลี่ยนแปลงได้ เราจะต้องสร้าง Pagination แบบ dynamic โดยใช้ JavaScript หรือ Server-Side Rendering
การจัดการกับหน้าแรกและหน้าสุดท้าย: เราอาจต้องการ disable ปุ่ม "Previous" เมื่ออยู่ที่หน้าแรก และ disable ปุ่ม "Next" เมื่ออยู่ที่หน้าสุดท้าย
Accessibility: ตรวจสอบให้แน่ใจว่า Pagination สามารถใช้งานได้กับ screen readers โดยใช้ aria-label และ aria-current อย่างถูกต้อง
ข้อผิดพลาดที่พบบ่อย: ลืมใส่ event.preventDefault() ทำให้หน้าเว็บ reload เมื่อคลิกที่ Pagination

แนวคิดเชิงระบบและ Pattern ทั่วไป

Pattern:

Ellipsis: ใช้ ellipsis (...) เพื่อย่อจำนวนหน้า Pagination เมื่อมีจำนวนหน้ามากเกินไป
Pagination Component: สร้าง Pagination เป็น component ที่สามารถนำกลับมาใช้ใหม่ได้ในหลายๆ ที่
Server-Side Rendering: ใช้ Server-Side Rendering เพื่อสร้าง Pagination ที่ SEO-friendly และโหลดเร็ว

ระบบ:

Data Fetching: เมื่อคลิกที่หน้าต่างๆ จะต้องมีการ fetch ข้อมูลที่เกี่ยวข้องกับหน้านั้นๆ
State Management: ใช้ state management library (เช่น React Context, Vuex, Redux) เพื่อจัดการ state ของ Pagination

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง Pagination ที่สวยงามและใช้งานได้จริงด้วย Tailwind CSS เราได้ครอบคลุมตั้งแต่โครงสร้าง HTML พื้นฐาน การปรับแต่งด้วย Tailwind CSS และการใช้ JavaScript เพื่อจัดการ active page นอกจากนี้ เรายังได้พูดถึงกรณีใช้งานจริง ข้อผิดพลาดที่พบบ่อย และแนวคิดเชิงระบบและ pattern ทั่วไป หวังว่าบทความนี้จะเป็นประโยชน์ในการสร้าง Pagination ที่มีประสิทธิภาพและใช้งานง่ายสำหรับผู้ใช้งาน