Phân trang (pagination) bằng bootstrap 4

23-06-2020 15:37:17
by: baobinhnet

Phân trang (Pagination) là thành phần không thể thiếu mỗi khi làm việc với dữ liệu số lượng lớn và cần phải giới hạn khi hiển thị ra ngoài. Ở phía ngoài frontend, thường chúng ta sẽ tốn một chút thời gian để làm giao diện cho phân trang. Tuy nhiên thì bootstrap 4 đã đơn giản hóa công việc này đi rất nhiều. Mời các bạn cùng mình theo dõi bài học này nhé.

Phân trang cơ bản (Basic Pagination)

Phần này thì cực đơn giản. Mọi thành phần tạo ra pagination đều nằm trong cặp thẻ ul & li, thêm vào thẻ ul class pagination, thêm vào mỗi thẻ <li> class .page-item thì mọi thứ coi như xong. Ngoài ra, trong thẻ <a> cần có class .page-link nữa nhé.

3 class này được Bootstrap 4 quy định như sau:

	.pagination {

	  display: -ms-flexbox;

	  display: flex;

	  padding-left: 0;

	  list-style: none;

	  border-radius: 0.25rem;

}

	.page-link {

	  position: relative;

	  display: block;

	  padding: 0.5rem 0.75rem;

	  margin-left: -1px;

	  line-height: 1.25;

	  color: #007bff;

	  background-color: #fff;

	  border: 1px solid #dee2e6;

}

	.page-link:hover {

	  z-index: 2;

	  color: #0056b3;

	  text-decoration: none;

	  background-color: #e9ecef;

	  border-color: #dee2e6;

}

	.page-link:focus {

	  z-index: 2;

	  outline: 0;

	  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

}

	.page-link:not(:disabled):not(.disabled) {

	  cursor: pointer;

}

	.page-item:first-child .page-link {

	  margin-left: 0;

	  border-top-left-radius: 0.25rem;

	  border-bottom-left-radius: 0.25rem;

}

	.page-item:last-child .page-link {

	  border-top-right-radius: 0.25rem;

	  border-bottom-right-radius: 0.25rem;

}

See the Pen <a href="https://codepen.io/longfullstack/pen/dyGWvyQ">Bootstrap 4 pagination</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Trạng thái active của Pagination

Class active sẽ hiển thị background để báo cho chúng ta biết đang ở trang nào.

Bootstrap 4 quy định class .active như sau:

	.page-item.active .page-link {

	  z-index: 1;

	  color: #fff;

	  background-color: #007bff;

	  border-color: #007bff;

}

Các bạn xem ví dụ dưới đây hoặc nhìn vào hình có thể thấy rõ là mình đang gán class active cho thẻ <li> số 3 và nó hiển thị background màu xanh:

See the Pen <a href="https://codepen.io/longfullstack/pen/VwebpYg">Bootstrap 4 Pagination Active</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Trạng thái Disabled trong Pagination

Class disabled cấm chúng ta click vào trang nào đó (thường là trang hiện tại).

Bootstrap 4 quy định class này như sau:

	.page-item.disabled .page-link {

	  color: #6c757d;

	  pointer-events: none;

	  cursor: auto;

	  background-color: #fff;

	  border-color: #dee2e6;

}

Ví dụ, mình gán class disabled cho thẻ <li> số 1 thì nó không còn hiện màu xanh nữa mà hiện màu đen , khi rê chuột vào nó không có hiện tượng được click vào:

See the Pen <a href="https://codepen.io/longfullstack/pen/YzwVZXg">Bootstrap 4 Pagination disable</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Kích cỡ của các thanh phân trang

Để điều chỉnh kích thước thanh phân trang, bạn có thể dùng các lớp .pagination-lg hay .pagination-sm, như sau:

	.pagination-lg .page-link {

	  padding: 0.75rem 1.5rem;

	  font-size: 1.25rem;

	  line-height: 1.5;

}

	.pagination-lg .page-item:first-child .page-link {

	  border-top-left-radius: 0.3rem;

	  border-bottom-left-radius: 0.3rem;

}

	.pagination-lg .page-item:last-child .page-link {

	  border-top-right-radius: 0.3rem;

	  border-bottom-right-radius: 0.3rem;

}

	.pagination-sm .page-link {

	  padding: 0.25rem 0.5rem;

	  font-size: 0.875rem;

	  line-height: 1.5;

}

	.pagination-sm .page-item:first-child .page-link {

	  border-top-left-radius: 0.2rem;

	  border-bottom-left-radius: 0.2rem;

}

	.pagination-sm .page-item:last-child .page-link {

	  border-top-right-radius: 0.2rem;

	  border-bottom-right-radius: 0.2rem;

}

See the Pen <a href="https://codepen.io/longfullstack/pen/vYLmxNM">Bootstrap 4 Pagination Size</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Vị trí thanh phân trang

Chúng ta có thể thiết lập vị trí hiển thị cho thanh phân trang ở bên trái, bên phải hay ở giữa với các class:

bên trái là thanh phân trang bình thường sử dụng class .pagination
ở giữa sử dụng class .justify-content-center
ở bên phải sử dụng class .fustify-content-end

Ví dụ:

See the Pen <a href="https://codepen.io/longfullstack/pen/YzwVZwM">Bootstrap 4 Pagination Position</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Lời kết

Bài viết đã đủ dài để các bạn có một cái nhìn khá đầy đủ về pagination trong bootstrap 4 hỗ trợ. Phân trang là phần được sử dụng rất phổ biến và quan trọng trong các trang web. Vì vậy, bạn cần nắm rõ các lớp của phân trang trong bootstrap để dễ dàng tạo các nút phân trang và tùy chỉnh kích thước, phân trang đang active hay disable một cách linh hoạt.

Xem thêm: bootstrap bootstrap 4 pagination bootstrap pagination bootstrap 4 phân trang bootstrap phân trang bootstrap 4

Học Bootstrap 4