Trong quá trình phát triển web, chúng ta luôn cần làm việc, xử lý và hiển thị dữ liệu dưới dạng danh sách. Đôi khi, những danh sách này sẽ rất dài, việc hiển thị hết chúng lên cùng lúc khiến cho giao diện không được đẹp và làm cho người dùng gặp khó khăn trong việc theo dõi nội dung trên trang web. 

Vấn đề này có thể giải quyết thông qua việc sử dụng phân trang (Pagination trong Bootstrap 5). Trong bài viết này, hãy cùng nhau tìm hiểu cách phân trang nhanh chóng và thuận tiện với Pagination trong Bootstrap 5.

1. Bootstrap là gì?

Bootstrap là một front-end framework mã nguồn mở miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn. Nó cung cấp một bộ công cụ và các lớp CSS có sẵn để tạo giao diện người dùng, bao gồm hệ thống lưới, nút, biểu mẫu và nhiều thành phần khác.

Với Bootstrap, bạn không cần phải viết CSS từ đầu, mà chỉ cần sử dụng các lớp CSS đã được định nghĩa sẵn. Điều này giúp bạn tiết kiệm thời gian và công sức trong việc tạo kiểu trong trang web của mình. Bạn cũng có thể tùy chỉnh Bootstrap để phù hợp với nhu cầu cụ thể của dự án.

Một điểm mạnh của Bootstrap là khả năng tương thích với đa dạng các thiết bị và kích thước màn hình khác nhau. Với việc sử dụng các lớp CSS và các thành phần đáp ứng sẵn có trong Bootstrap, trang web của bạn sẽ tự động thích ứng và hiển thị tốt trên điện thoại di động, máy tính bảng và máy tính để bàn.

Với sự phổ biến và mã nguồn mở của nó, Bootstrap đã trở thành một trong những framework CSS phổ biến nhất trên thế giới, được sử dụng rộng rãi trong cộng đồng phát triển web.

Pagination trong Bootstrap 5 (Hình 1)

2. Sử dụng Pagination trong Bootstrap 5

Pagination trong Bootstrap 5 sử dụng thẻ <nav> để bao bọc toàn bộ vùng phân trang. Việc sử dụng thẻ <nav> cũng có vai trò như một phần điều hướng đối với các trình thu thập dữ liệu trang web.

Ngoài ra, thông thường chúng ta sẽ đặt thuộc tính aria-label để mô tả cho thẻ <nav> nhằm phản ánh rõ ràng hơn mục đích của nó. Ví dụ, nếu thành phần phân trang được sử dụng để điều hướng giữa một tập hợp kết quả tìm kiếm, một nhãn thích hợp có thể là aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <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>

Qua ví dụ trên ta có thể thấy rằng, class .pagination là class được Bootstrap định nghĩa sẵn cho việc hiển thị phân trang lên giao diện. Đây cũng là ví dụ cơ bản nhất cho cách hiển thị phân trang nhanh chóng.

>>> Xem thêm bài viết:

3. Thay đổi icons Pagination trong Bootstrap 5

Nhìn vào đoạn mã ví dụ ở phía trên, chúng ta có thể thấy rằng việc để Previous hay Next không phải lúc nào cũng thân thiện với người dùng. Lúc này, chúng ta hoàn toàn có thể thay thế chúng bằng các icons giúp cho mọi thứ trông đẹp hơn. Ta cùng xem ví dụ sau:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

4. Disabled hoặc active Pagination trong Bootstrap 5

Pagination trong Bootstrap 5 còn hỗ trợ sẵn chúng ta một số class cho phép xử lý một số thao tác thường xuyên gặp như .disabled hay .active. Class .disabled hỗ trợ chúng ta không cho phép bấm với những liên kết được sử dụng class này, class .active được sử dụng để cho biết trang hiện tại.

Ví dụ 1:

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>

Ví dụ 2:

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </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>

5. Kích thước Pagination trong Bootstrap 5

Chúng ta có thể tùy chỉnh kích thước lớn hoặc bé của phân trang bằng cách thêm các class .pagination-lg hay .pagination-sm.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>
  </ul>
</nav>

6. Căn lề Pagination trong Bootstrap 5

Chúng ta hoàn toàn có thể thay đổi căn chỉnh của phân trang với flexbox như sau:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Tổng kết

Pagination trong Bootstrap 5 cung cấp cách tạo giao diện phân trang cho trang web của bạn. Với sự linh hoạt và tính năng tùy chỉnh, bạn có thể tạo ra giao diện phân trang đẹp mắt và dễ sử dụng cho người dùng của mình. Hãy thử sử dụng Bootstrap 5 để tạo giao diện phân trang cho dự án của bạn và tận hưởng lợi ích mà nó mang lại.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: