Pagination (phân trang) là một thành phần quan trọng trong giao diện web giúp chia nội dung thành nhiều trang nhỏ, giúp người dùng dễ dàng điều hướng giữa các trang. Bootstrap 5 cung cấp một hệ thống phân trang đơn giản nhưng linh hoạt, giúp bạn tạo ra giao diện phân trang đẹp mắt và dễ sử dụng.

Trong bài viết này, hãy cùng CodeTutHub tìm hiểu cách sử dụng Pagination trong Bootstrap 5 với các tính năng cơ bản và nâng cao.

1. Tạo Pagination cơ bản

Để tạo phân trang đơn giản, sử dụng đoạn mã sau:

html
Thử online
<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">Trước</a>
    </li>
    <li class="page-item active">
      <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="#">Tiếp</a>
    </li>
  </ul>
</nav>

Giải thích:

  • .pagination giúp định dạng danh sách phân trang.
  • .page-item là mỗi mục trong danh sách phân trang.
  • .page-link là liên kết cho mỗi trang.
  • .active đánh dấu trang hiện tại.
  • .disabled vô hiệu hóa nút điều hướng.

2. Pagination kích thước lớn và nhỏ

Bạn có thể thay đổi kích thước của phân trang bằng cách thêm .pagination-lg hoặc .pagination-sm:

html
Thử online
<ul class="pagination pagination-lg">
  	<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>
</ul>

<ul class="pagination pagination-sm">
  	<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>
</ul>

3. Pagination căn giữa hoặc căn phải

Mặc định, pagination sẽ căn trái. Bạn có thể sử dụng Flexbox để căn giữa hoặc căn phải:

html
Thử online
<ul class="pagination justify-content-center">
  	<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>
</ul>

<ul class="pagination justify-content-end">
  	<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>
</ul>
  • .justify-content-center để căn giữa.
  • .justify-content-end để căn phải.

4. Pagination với biểu tượng

Bạn có thể sử dụng biểu tượng thay vì chữ bằng cách dùng Font Awesome hoặc Bootstrap Icons:

html
Thử online
<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="#" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>
</ul>
  • &laquo; (góc kép trái) và &raquo; (góc kép phải) giúp tạo nút điều hướng.

5. Pagination với JavaScript

Bạn có thể sử dụng JavaScript để điều khiển phân trang động mà không cần tải lại trang.

html
Thử online
<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".page-link").forEach(item => {
      item.addEventListener("click", function(event) {
        event.preventDefault();
        document.querySelector(".active").classList.remove("active");
        this.parentElement.classList.add("active");
      });
    });
  });
</script>[SKIPSTRYONLINE]

Kết luận

Pagination là một thành phần quan trọng giúp cải thiện trải nghiệm người dùng trên các trang web có nhiều nội dung. Bootstrap 5 cung cấp nhiều tùy chọn để bạn dễ dàng tạo phân trang đẹp và chuyên nghiệp.

Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận nhé! 🚀