สอนใช้งาน Bootstrap 4

Bootstrap 4 Pagination การแบ่งหน้า

Pagination เป็นหนึ่งในองค์ประกอบที่สำคัญสำหรับเว็บไซต์ที่มีข้อมูลจำนวนมากที่ไม่สามารถแสดงทั้งหมดในหน้าเดียว การแบ่งข้อมูลเป็นหลายหน้าด้วย Pagination ช่วยนำทางข้อมูลให้ผู้ใช้งานได้อย่างง่ายดาย โดย Bootstrap 4 ได้เตรียมรูปแบบ Pagination มาให้ใช้งานอย่างง่ายดายและสวยงาม

รูปแบบ Pagination พื้นฐาน

รูปแบบ Pagination พื้นฐานสามารถสร้างได้ง่าย ๆ ด้วยการใช้คลาส pagination และรายการภายในเป็น <li> บรรจุลิงก์ที่เราต้องการให้ผู้ใช้คลิกเพื่อไปยังหน้าถัดไป

HTML
<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" 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="#">Next</a></li>
  </ul>
</nav>

การเพิ่มการกำหนดสถานะ Active และ Disabled

Bootstrap 4 รองรับการตั้งค่าปุ่มให้มีสถานะ Active สำหรับหน้าปัจจุบัน และ Disabled สำหรับปุ่มที่ไม่สามารถใช้งานได้ (เช่นปุ่ม Previous ที่ไม่มีหน้าให้กลับไป)

HTML
<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><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="#">Next</a></li>
  </ul>
</nav>
  • คลาส active ใช้สำหรับแสดงหน้าปัจจุบัน
  • คลาส disabled ใช้สำหรับปุ่มที่ไม่สามารถใช้งานได้

Pagination ขนาดต่าง ๆ

Bootstrap 4 รองรับการปรับขนาดของ Pagination ให้เล็กหรือใหญ่ขึ้น โดยใช้คลาส pagination-lg และ pagination-sm

ขนาดใหญ่ (Large Pagination)

HTML
<nav>
  <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" 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="#">Next</a></li>
  </ul>
</nav>

ขนาดเล็ก (Small Pagination)

HTML
<nav>
  <ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" 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="#">Next</a></li>
  </ul>
</nav>

Pagination สำหรับหน้าสุดท้ายและหน้าแรก (First and Last Pagination)

นอกจากการแสดงผล Previous และ Next เราสามารถเพิ่มปุ่ม First และ Last ได้เช่นกันสำหรับการนำทางไปยังหน้าสุดท้ายหรือหน้าแรก

HTML
<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">First</a></li>
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" 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="#">Next</a></li>
    <li class="page-item"><a class="page-link" href="#">Last</a></li>
  </ul>
</nav>

Pagination สำหรับการซ่อนเลขหน้า (Ellipsis Pagination)

ในกรณีที่มีจำนวนหน้ามาก เราสามารถซ่อนบางหน้าและแสดงเฉพาะหน้าแรก หน้าเดิม หน้าใหม่ และหน้าสุดท้ายด้วยการใช้ Ellipsis (…)

HTML
<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

สรุป

Pagination เป็นองค์ประกอบที่จำเป็นสำหรับการนำทางข้อมูลในเว็บไซต์ที่มีข้อมูลจำนวนมาก โดย Bootstrap 4 ได้จัดเตรียมเครื่องมือที่มีประสิทธิภาพและปรับแต่งได้หลากหลายเพื่อสร้าง Pagination ทั้งนี้การใช้งาน Pagination ของ Bootstrap 4 ยังสามารถปรับแต่งขนาด, เพิ่มสถานะ Active/Disabled, เพิ่มปุ่ม First/Last และใช้งานแบบ Ellipsis เพื่อปรับให้เหมาะสมกับเว็บไซต์ของเรา

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ