แบ่งหน้า Bootstrap ด้วย Pagination

แบ่งหน้า Bootstrap ด้วย Pagination บทความนี้สอนสร้างส่วนแสดงผลการแบ่งหน้าด้วย Bootstrap Framework โดยใช้ชุดคำสั่งในกลุ่ม Pagination ร่วมกับแท็กต่างๆ ของภาษา HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง แบ่งหน้า Bootstrap ด้วย Pagination

1. ติดตั้ง Bootstrap Framework ผ่าน CDN ของ jsDelivr

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

2. เขียนโค้ดสร้างส่วนแสดงผลแบ่งหน้า Bootstrap ด้วย Pagination

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">ก่อนหน้า</a></li>
  <li class="page-item"><a class="page-link active" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">ถัดไป</a></li>
</ul>

แบ่งหน้า Bootstrap ด้วย Pagination เริ่มต้นด้วยการติดตั้ง Bootstrap ผ่าน CDN ประกอบด้วยไฟล์ js และ css จากนั้นใช้แท็ก ul li ร่วมกับ class ในชุดคำสั่ง Pagination ของ Bootstrap เพื่อสร้างส่วนแสดงผลการแบ่งหน้า มีรายละเอียดดังนี้

1. แท็ก ul คือส่วนคลุมแต่ละปุ่มลิงก์ของส่วนการแสดงผลแบ่งหน้า มี class ที่สำคัญคือ pagination

2. แท็ก li คือส่วนที่คลุมแท็ก a โดยทั้ง 2 ทำหน้าที่สร้างปุ่มลิงก์บนหน้าเว็บไซต์ เพื่อให้ผู้ใช้งานกดคลิกเพื่อเปลี่ยนหน้า

3. แท็ก li มี class ที่สำคัญคือ page-item ส่วนแท็ก a มี class ที่สำคัญคือ page-link

4. class active ใช้สำหรับ highlight ปุ่มลิงก์หน้าที่กำลังทำงานอยู่ เพื่อแสดงให้ผู้ใช้งานทราบว่าตอนนี้อยู่ที่หน้าหมายเลขใด