Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Pagination Và 20 Ví Dụ Phân Trang Cho Website

Cách Tạo Pagination Và 20 Ví Dụ Phân Trang Cho Website


Ngày 14 Tháng 8 Năm 2020

Khi một trang web bạn có nhiều sản phẩm hay bài viết thì việc phân trang là một nhiệm vụ rất quan trọng. Nó làm tăng tốc độ tải trang cũng như giúp người dùng có thể dễ dàng theo dõi nội dung của bạn trên trang web. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu cách thiết kế pagination bằng HTML, CSS và Javascript cho website nhé!

Cách tạo Pagination Cơ Bản Bằng HTML CSS

Đầu tiên chúng ta sẽ đi vào tìm hiểu cách tạo pagination cơ bản cho trang web bằng HTML và CSS nhé!

HTML

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

Class active có nhiệm vụ giúp người dùng biết được mình đang ở trang nào thông qua cách chúng ta thiết lập màu cho nó. Và thường thì color của class này sẽ khác so với các số trang còn lại. Để hiểu rõ hơn bạn xem đoạn mã CSS sau nhé!

CSS

/* thiết lập style cho thẻ a */
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}
/* thiết lập style cho class active */
.pagination a.active {
  background-color: dodgerblue;
  color: white;
}
/* thêm màu nền khi người dùng hover vào class không active */
.pagination a:hover:not(.active) {
  background-color: #ddd;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen Pagination cơ bản by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách tạo Pagination Border Bằng HTML CSS

Như bạn thấy ở ví dụ trên thì class active của chúng ta có hình chữ nhật. Trong phần này mình sẽ giới thiệu đến bạn cách tạo pagination với hình tròn nhé!

HTML

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

CSS

/* thiết lập style cho thẻ a */
 .pagination a {
   color: black;
   float: left;
   padding:  12px 18px;
   text-decoration: none;
 }
/* thiết lập style cho class active */
 .pagination a.active {
   background-color: dodgerblue;
   color: white;
   /*Thiết kế hình tròn với CSS*/
   border-radius: 50%;
 }
/* thêm màu nền khi người dùng hover vào class không active */
 .pagination a:hover:not(.active) {
   background-color: #ddd;
   /*Thiết kế hình tròn với CSS*/
   border-radius: 50%;
 }

Và kết quả cuối cùng bạn xem ở bên dưới nhé:

See the Pen pagination với hình tròn by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách tạo Pagination Với Thẻ li

Phần này chúng ta sẽ đi vào tìm hiểu cách tạo phần trang từ thẻ li nhé!

HTML

<div class="flex">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <div class="bar"></div>
  </ul>
</div>

CSS

/*thiết lập style cho màu sắc, vị trí, độ cao... cho pagination*/
.flex {
  width: 400px;
  height: 80px;
  line-height: 80px;
  background-color: #eeeeee;
  position: absolute;
  top: 15%;
  left: 40%;
  margin: -25px 0 0 -150px;
}
/*Thiết lập style cho thẻ ul*/
.flex ul {
  display: flex;
  padding: 0;
  margin: 0;
  box-shadow: 0 10px 20px 0 #cccccc;
}
/*thiết lập style cho thẻ li*/
.flex ul li {
  flex: 1;
  list-style: none;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s ease;
  cursor: pointer;
  user-select: none;
}
/*tạo hiệu ứng hover cho thẻ li */
.flex ul li:hover {
  background-color: rgba(255, 255, 255, 0.25);
  color: #65bcc9;
}
/*chuyển đổi vị trí của class bar khi người dùng hover vào các con số*/
.flex ul li:hover:nth-of-type(2) ~ .bar {
  left: 20%;
}
.flex ul li:hover:nth-of-type(3) ~ .bar {
  left: 40%;
}
.flex ul li:hover:nth-of-type(4) ~ .bar {
  left: 60%;
}
.flex ul li:hover:nth-of-type(5) ~ .bar {
  left: 80%;
}
/*thiết lập style cho class bar*/
.flex ul .bar {
  width: 20%;
  background-color: dodgerblue;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.3s ease;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen pagination vởi thẻ li by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Các Ví Dụ Pagination Cho Website

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Cách Tạo Pagination Javascript

See the Pen Pacman pagination by Mikael Ainalem (@ainalem) on CodePen.

Nguồn

Tổng Hợp Các Pagination HTML CSS

See the Pen Pagination by Vineeth.TR (@vineethtrv) on CodePen.

Nguồn

Thiết Kế Pagination CSS3 Javascript

See the Pen Flexing pagination arrows by Hakim El Hattab (@hakimel) on CodePen.

Nguồn

Thiết Kế Pagination CSS

See the Pen Pagination by Rosa (@RRoberts) on CodePen.

Nguồn

Thiết Kế Pagination Với SVG

See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.

Nguồn

Cách Tạo Pagination Jquery

See the Pen Hover and Active Pagination by Doğukan Çavuş (@dgknca) on CodePen.

Nguồn

Thiết Kế CSS Pagination

See the Pen Pagination One by Steven Roberts (@matchboxhero) on CodePen.

Nguồn

Thiết Kế Pagination

See the Pen responsive pagination by Milica (@micadev) on CodePen.

Nguồn

Thiết Lập Hiệu Ứng Animation cho Pagination

See the Pen Spring pagination by Mikael Ainalem (@ainalem) on CodePen.

Nguồn

Thiết Kế Pagination HTML5

See the Pen Pagination with morphing numbers by Mikael Ainalem (@ainalem) on CodePen.

Nguồn

Tạo Hiệu Ứng Pagination Với GSAP

See the Pen Dot Hopper - Pagination by Elliot Geno (@pyrografix) on CodePen.

Nguồn

Cách Tạo Jquery Pagination

See the Pen WebDesignerDepot pagination by Wouter Bles (@wouterbles) on CodePen.

Nguồn

Thiết Kế Responsive Pagination

See the Pen pagination hover animation by Elena Nazarova (@nazarelen) on CodePen.

Nguồn

Hiệu Ứng Hover Cho Pagination

See the Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.

Nguồn

Thiết Kế Pagination Bằng Jquery

See the Pen Pagination by Kasper Mikiewicz (@Idered) on CodePen.

Nguồn

Tổng Hợp Các Pagination Với SVG

See the Pen SVG Pagination Animation(s) by Adam, Ironclad, Wells (@Adamlwells408) on CodePen.

Nguồn

Thiết Kế Pagination Jquery CSS3

See the Pen Unrealistic Pagination by Tony Banik (@banik) on CodePen.

Nguồn

Thiết Kế Pagination CSS Javascript

See the Pen Pagination : Almost Tabs by Mandy McClausky (@mandynicole) on CodePen.

Nguồn

Cách Tạo Responsive Pagination HTML CSS

See the Pen Responsive Pagination by Tommy Hodgins (@tomhodgins) on CodePen.

Nguồn

Cách Tạo Responsive Pagination Jquery Cho Website

See the Pen Responsive Magic Line Pagination by Ryan Yu (@iamryanyu) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những pagination hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!