Kết nối

[Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4

2.185 lượt xem 
 Cập nhật lần cuối: 14/12/2019 lúc 02:16:41
Thể loại: Bootstrap 

Tương tự Bootstrap 3, Bootstrap 4 cũng có chức năng để thể hiện việc phân trang trên giao diện. Trước khi tìm hiểu về cách phân trang trong Bootstrap, một số kiến thức nền giúp bạn hiểu về phân trang như sau.

Phân trang (paging) là một khái niệm rất quen thuộc trong việc thiết kế và phát triển ứng dụng Web. Giả sử bạn có 10000 sản phẩm trong cơ sở dữ liệu, và nếu sử dụng truy vấn để hiển thị hết 10000 sản phẩm này lên 1 trang web, tất nhiên bạn phải chờ rất lâu mới có thể thấy toàn bộ dữ liệu. Hơn nữa, máy của bạn sẽ bị đơ, nguy hiểm hơn là Web Server cũng bị như vậy, thậm chí nguy hiểm hơn là rớt toàn bộ hệ thống. Trong thực tế, tất cả các Web Server và Server Database đều có cơ chế chặn dòng dữ liệu lớn vào/ra, vì vậy thông thường sẽ bung ra lỗi. Do đó, thông thường người ta sử dụng kỹ thuật phân trang để hạn chế số lượng record trong database có thể hiển thị trong cùng 1 thời điểm (ví dụ 100 sản phẩm), do đó để hiển thị hết toàn bộ 1 triệu sản phẩm, bạn cần phân ra thành 100 trang con so với 1 trang chứa 10000 sản phẩm. Con số này không quá lớn giúp người dùng có thể tương tác với website của bạn dễ dàng.

Ở Bootstrap 4, việc phân trang chủ yếu là thiết kế giao diện Web, không phải là việc lập trình và xây dựng mã nguồn để lấy dữ liệu từ database, sau đó phân thành các trang và hiển thị trên Web.

Tạo giao diện phân trang

Để tạo giao diện phân trang cơ bản, bạn cần thêm lớp .pagination vào phần tử ul. Sau đó, cứ mỗi phần tử li nằm trong ul thì bạn thêm lớp .page-item, đối với liên kết bên trong li thì bạn dùng lớp .page-link. Hãy xem ví dụ đơn giản sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Thêm lớp .pagination vào phần tử ul, sau đó thêm lớp .page-item vào mỗi phần tử và với 1 liên kết trong li thì thêm lớp .page-link:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Trước</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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
</div>

</body>
</html>

Hiển thị trang cần kích hoạt

Nếu bạn muốn trang nào đó được kích hoạt, có màu sáng hơn so với các trang khác, bạn chỉ cần thêm lớp .active là được. Mặc định trang được kích hoạt có màu xanh dương (blue) và chữ màu trắng.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Thêm lớp .active để kích hoạt trang bất kỳ:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Trước</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 active"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
</div>

</body>
</html>

Hủy kích hoạt trang

Tương tự như kích hoạt trang, để hủy kích hoạt trang nào đó, bạn cần thêm lớp .disabled như sau. Khi đó trang bị hủy kích hoạt để có màu nhạt.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Thêm lớp .disabled để hủy kích hoạt trang bất kỳ:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
</div>

</body>
</html>

Kích thước phân trang

Để tăng, giảm kích thước phân trang, bạn có thể dùng 2 lớp: .pagination-lg cho kích thước lớn và .pagination-sm cho kích thước nhỏ hơn. Ngoài ra, bạn phải tự định nghĩa các lớp CSS riêng để có kích thước như ý nếu muốn.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Thêm 2 lớp: .pagination-lg và .pagination-sm để tăng giảm kích thước:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
  <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
  <ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
</div>

</body>
</html>

Căn chỉnh phân trang

Tương tự các bố cục HTML khác, bạn có thể canh chỉnh dòng phân trang ở bên trái, giữa và bên phải. Mặc định giao diện hiển thị phân trang là nằm bên trái, để hiển thị ở giữa dùng lớp .justify-content-center, ở bên phải thì dùng lớp .justify-content-end như ví dụ sau

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Sử dụng lớp justify-content-center (canh giữa) và .justify-content-end (canh phải ) cho vùng phân trang:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">Trước</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 disabled"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
</div>

</body>
</html>

Breadcrumb

Breadcrumb trong tiếng Anh có nghĩa là bánh mì, hoặc cắt lát như bánh mì. Thật ra, trong giao diện Web Breadcrumb là một dạng điều hướng (navigation) chứa các mục liên kết phân cấp từ lớn đến nhỏ, ví dụ Trang chủ –> Giới thiệu –> Lịch sử hình thành. Để dùng breadcrumb trong Bootstrap 4, bạn chỉ cần sử dụng lớp .breadcrumb và .breadcrumb-item cho mỗi phần tử con trong mô hình phân cấp.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Breadcrumb trong Bootstrap 4 --- dammio.com</h2>
  <p>Sử dụng lớp .breadcrumb để thể hiện breadcum và lớp .breadcrumb-item chỗ mỗi phần tử con:</p>                  
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="#">Giới thiệu</a></li>
    <li class="breadcrumb-item"><a href="#">Lịch sử hình thành</a></li>
  </ul>
</div>

</body>
</html>

Tùy biến giao diện phân trang

Để tùy biến giao diện phân trang, không có cách nào khác là bạn phải sử dụng lớp CSS ghi đè các lớp các sẵn trong tập tin pagination.css của Bootstrap. Hãy xem một ví dụ thay đổi đường viền, nền, chữ thành màu xanh lá như sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
  <style>
	.pagination > li > a
	{
		background-color: white;
		color: green
	}
	
	.page-item.active .page-link
	{
		background-color:green;
		border-color:green
	}
	
	.pagination > li > a:focus,
	.pagination > li > a:hover,
	.pagination > li > span:focus,
	.pagination > li > span:hover
	{
		color: green;
		background-color: #eee;
		border-color: #ddd;
	}
	
	.pagination > .active > a
	{
		color: white;
		background-color: green;
		border: solid 1px green;
	}

	.pagination > .active > a:hover
	{
		background-color: green;
		border: solid 1px green;
	}
	</style>
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Tùy biến giao diện phân trang:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Trước</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><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="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Sau</a></li>
  </ul>
</div>

</body>
</html>

Nhúng giao diện phân trang vào một bảng có thanh cuộn ngang

Nếu bạn có một giao diện phân trang với hàng chục trang và khi đó có thể làm bể giao diện website. Giải pháp đưa ra là bạn có thể nhúng giao diện phân trang vào trong 1 bảng đáp ứng (lớp .table-responsive) và có thanh cuộn ngang giúp giao diện không bị bể. Hãy xem ví dụ sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
</head>
<body>

<div class="container">
  <h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
  <p>Giao diện chứa trong một bảng đáp ứng (.table-responsive) để tránh bể giao diện với lượng lớn trang được hiển thị:</p>                  
  
  <nav aria-label="Ví dụ điều hướng trang" class="table-responsive mb-2">
  <ul class="pagination mb-0">
    <li class="page-item"><a class="page-link" href="#" tabindex="-1">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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>
    <li class="page-item"><a class="page-link" href="#">12</a></li>
    <li class="page-item"><a class="page-link" href="#">13</a></li>
    <li class="page-item"><a class="page-link" href="#">14</a></li>
    <li class="page-item"><a class="page-link" href="#">15</a></li>
    <li class="page-item"><a class="page-link" href="#">16</a></li>
    <li class="page-item"><a class="page-link" href="#">17</a></li>
    <li class="page-item"><a class="page-link" href="#">18</a></li>
    <li class="page-item"><a class="page-link" href="#">19</a></li>
    <li class="page-item"><a class="page-link" href="#">20</a></li>
	<li class="page-item"><a class="page-link" href="#">21</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

</div>

</body>
</html>

Kết luận

Bài viết đã chỉ ra cho bạn cách thiết kế giao diện phân trang trong Bootstrap 4 thông qua các ví dụ. Mời bạn tiếp tục theo dõi bài tiếp theo.

2
Để lại bình luận

avatar
1000
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của
trackback

[…] [Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4 – 12 tháng 12, 2019 lúc 8:11:53 Sáng […]

trackback

[…] [Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4 – 12 tháng 12, 2019 lúc 8:11:53 Sáng […]