CSS Pagination – Cách sử dụng Pagination trong CSS

CSS Pagination là một kỹ thuật rất hữu ích để sắp xếp các trang khác nhau của một trang web trên trang chủ. Nếu trang web của bạn có nhiều trang, bạn phải thêm một loại phân trang nào đó cho mỗi trang. Đối với các trang web lớn hoặc có nội dung phong phú, việc sử dụng CSS Pagination là không thể thiếu.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Tổng quan CSS Pagination

CSS Pagination là một phương pháp giúp người dùng trải nghiệm tốt hơn khi duyệt các trang web lớn, phức tạp. Kỹ thuật này cho phép phân chia các trang thành các phần nhỏ hơn và đánh số chúng để người dùng có thể dễ dàng chuyển đến trang mong muốn. CSS Pagination không chỉ giúp tăng trải nghiệm người dùng, mà còn giúp tăng khả năng tải trang nhanh hơn và cải thiện hiệu suất của trang web.

CSS Pagination là phương pháp sắp xếp các trang khác nhau của một trang web trên trang chủ bằng cách chia chúng thành các phần nhỏ hơn và đánh số chúng để người dùng có thể dễ dàng chuyển đến trang mong muốn.

Hướng dẫn CSS Pagination

CSS Pagination là một tập hợp các thuộc tính CSS được sử dụng để tạo các bộ điều khiển pagination cho các trang web. Các bộ điều khiển pagination cho phép người dùng di chuyển giữa các trang nội dung. Có nhiều cách để tạo CSS Pagination, sau đây là một số ví dụ:

Basic Pagination

Đây là loại phân trang đơn giản nhất. Bạn phải sử dụng lớp phân trang cho phần tử <ul> để đạt được phân trang này.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Basic Pagination with arrow

Phân trang này được sử dụng khi bạn có nhiều trang. Nó cho phép bạn sử dụng các mũi tên cho trang trước và sau.

<ul class="pagination">
  <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
</ul>

Active/Current link and Hoverable Pagination

Phân trang này được sử dụng khi bạn muốn làm nổi bật trang hiện tại và thay đổi màu của mỗi liên kết trang khi di chuột qua chúng. Bạn phải sử dụng lớp .active và chọn kết hợp :hover để có hiệu ứng này.

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#" class="active">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Rounded Active and Hoverable Pagination

Trong phân trang này, bạn sử dụng thuộc tính border-radius để có được nút “active” và “hover” được bo tròn.

<ul class="pagination">
  <li><a href="#">1</a></li <li><a href="#" class="active">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Bordered Pagination

Trong phân trang này, bạn sử dụng thuộc tính border để thêm đường viền cho phân trang.

<ul class="pagination bordered">
  <li><a href="#">1</a></li>
  <li><a href="#" class="active">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Rounded Border Pagination

Phương pháp phân trang này được sử dụng để thêm viền bo tròn cho liên kết đầu tiên và cuối cùng của phân trang.

<ul class="pagination rounded-border">
  <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>

Space Between Pagination

Thuộc tính margin được sử dụng để tạo khoảng cách giữa các liên kết trong phân trang.

<ul class="pagination space-between">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Pagination Size

Bạn có thể thay đổi kích thước của phân trang bằng cách sử dụng thuộc tính font-size.

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Centered Pagination

Bạn phải bọc một phần tử container xung quanh phân trang, ví dụ như <div>, sau đó sử dụng text-align:center để đưa phân trang vào giữa trang web.

<div class="pagination-container">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

Previous/Next and Navigation Pagination

Bạn có thể thêm phân trang cho nút trang trước / trang sau và cũng có thể thêm phân trang cho điều hướng.

<ul class="pagination">
  <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>

Breadcrumb Pagination

Loại phân trang đặc biệt này được gọi là breadcrumb pagination. Nó hiển thị con đường dẫn của người dùng đến trang hiện tại.

Ví dụ sử dụng CSS Pagination

CSS Pagination là một tập hợp các thuộc tính CSS được sử dụng để tạo các bộ điều khiển pagination cho các trang web. Các bộ điều khiển pagination cho phép người dùng di chuyển giữa các trang nội dung.

Dưới đây là một số ví dụ về cách sử dụng CSS Pagination:

Tạo các bộ điều khiển pagination cơ bản

CSS Pagination có thể được sử dụng để tạo các bộ điều khiển pagination cơ bản bao gồm các nút trước, trang hiện tại, trang tiếp theo, và số trang.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Pagination để tạo một bộ điều khiển pagination cơ bản:

<ul class="pagination">
  <li class="page-item"><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 theo</a></li>
</ul>

Trong ví dụ này, một bộ điều khiển pagination cơ bản được tạo bằng cách sử dụng CSS Pagination. Bộ điều khiển pagination bao gồm các nút trước, trang hiện tại, trang tiếp theo, và số trang.

Tạo các bộ điều khiển pagination tùy chỉnh

CSS Pagination cũng có thể được sử dụng để tạo các bộ điều khiển pagination tùy chỉnh với các kiểu và chức năng khác nhau.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Pagination để tạo một bộ điều khiển pagination tùy chỉnh:

<ul class="pagination">
  <li class="page-item previous"><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 next"><a class="page-link" href="#">Tiếp theo</a></li>
</ul>

.pagination .page-item {
  display: inline-block;
  padding: 10px 15px;
  margin-right: 10px;
  border-radius: 5px;

  &.previous {
    border-left-radius: 0;
  }

  &.next {
    border-right-radius: 0;
  }
}

.pagination .page-link {
  color: #000;
  text-decoration: none;
}

.pagination .page-item.active {
  background-color: #000;
  color: #fff;
}

Trong ví dụ này, một bộ điều khiển pagination tùy chỉnh được tạo bằng cách sử dụng CSS Pagination. Bộ điều khiển pagination bao gồm các nút trước, trang hiện tại, và trang tiếp theo. Các nút có các kiểu và chức năng khác nhau.

Ưu và Nhược điểm CSS Pagination

Ưu điểm:

• Cải thiện trải nghiệm người dùng: Khi trang web của bạn có nhiều trang, phân trang giúp người dùng dễ dàng tìm kiếm và điều hướng đến trang mong muốn.
• Tăng tốc độ tải trang: Phân trang giúp giảm thời gian tải trang bằng cách chỉ hiển thị một số lượng trang nhất định mỗi lần, thay vì hiển thị toàn bộ các trang trên cùng một trang.
• Dễ dàng sử dụng và tùy biến: CSS Pagination đơn giản và dễ dàng để sử dụng. Nó cho phép bạn tùy chỉnh các tính năng và giao diện phân trang để phù hợp với trang web của bạn.

Nhược điểm:

• Không phù hợp cho các trang web có nội dung phức tạp: Nếu trang web của bạn chứa nhiều loại nội dung khác nhau, phân trang có thể không phù hợp, vì người dùng có thể bỏ lỡ các phần quan trọng.
• Không dành cho các trang web có ít trang: Nếu trang web của bạn chỉ có một số lượng trang nhỏ, việc sử dụng phân trang có thể không cần thiết và gây nhầm lẫn cho người dùng.
• Không tương thích với một số trình duyệt: Mặc dù CSS Pagination được sử dụng rộng rãi, nhưng nó có thể không tương thích với một số trình duyệt cũ hoặc phiên bản mới nhất của các trình duyệt.

Lời khuyên CSS Pagination

Nếu bạn muốn sử dụng CSS Pagination trên trang web của mình, hãy cân nhắc các yếu tố sau:

• Xác định mục đích sử dụng: Bạn có thực sự cần phân trang cho trang web của mình? Nếu trang web chỉ có một số lượng trang nhỏ, việc sử dụng phân trang có thể không cần thiết.
• Chọn loại phân trang phù hợp: Có nhiều loại phân trang khác nhau để lựa chọn, hãy chọn loại phù hợp với trang web của bạn để tối ưu trải nghiệm người dùng.
• Tinh chỉnh giao diện: CSS Pagination cho phép bạn tinh chỉnh giao diện phân trang để phù hợp với trang web của bạn. Hãy kiểm tra và điều chỉnh các thuộc tính CSS để tạo ra phân trang đẹp và chuyên nghiệp.