Bài 15: Pagination trong Bootstrap để phân trang

Bài 15: Pagination trong Bootstrap để phân trang

Pagination trong Bootstrap được dùng để phân trang, một trong những phần không thể thiếu trên trang Web của bạn.

Ở bài trước chúng ta đã tìm hiểu về cách sử dụng Modal trong Bootstrap rồi, ở bài viết này hãy cùng sonnguyenaz.com tiếp tục tìm hiểu về cách phân trang nhé.

Cách sử dụng Pagination trong Bootstrap

Giới thiệu về Pagination trong Bootstrap

Đối với các trang web có nhiều nội dung như bảng dữ liệu, danh sách bài viết… thì chúng ta bắt buộc phải phân trang để giúp cải thiện tốc độ load trang cũng như không phải kéo chuột nhiều lần.

Ví dụ như một trang hiển thị cả nghìn bài viết, chúng ta sẽ phân ra mỗi trang hiển thị 10 bài và ở dưới cùng có đánh số trang, hiển thị số trang đang xem hiện tại, có nút bấm để lùi trang và tiến trang.

Pagination trong Bootstrap sẽ giúp bạn tạo giao diện cho nó bao gồm các thành phần kể trên, bạn chỉ cần đưa vào cho trang web của mình.

Ví dụ về 1 Pagination đơn giản

Chúng ta sẽ thử tạo một phân trang đơn giản bao gồm số trang và các nút bấm lùi trang, tiến trang.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<nav aria-label="Page navigation example">
	<ul class="pagination">
	<li class="page-item"><a class="page-link" href="#">Trang 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="#">Trang sau</a></li>
	</ul>
	</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

phan-trang-bang-pagination-trong-bootstrap

Chúng ta có thể vô hiệu hóa nút bấm trong các trường hợp như đang ở trang hiện tại, ở trang đầu tiên thì vô hiệu hóa nút “Trang trước” hoặc ở trang cuối cùng thì vô hiệu hóa nút “Trang sau“.

Để làm được như vậy thì bạn sẽ phải sử dụng thuộc tính disabled ở mỗi page-item:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<nav aria-label="Page navigation example">
	<ul class="pagination">
	<li class="page-item"><a class="page-link" href="#">Trang trước</a></li>
	<li class="page-item disabled"><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="#">Trang sau</a></li>
	</ul>
	</nav>
    <!-- End Example Code -->
  </body>
</html>

Ngoài ra, chúng ta còn phải cho người dùng biết hiện tại mình đang xem ở trang nào bằng cách nhấn mạnh trang đó lên bằng thuộc tính active:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<nav aria-label="Page navigation example">
	<ul class="pagination">
	<li class="page-item"><a class="page-link" href="#">Trang trước</a></li>
	<li class="page-item active" aria-current="page"><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="#">Trang sau</a></li>
	</ul>
	</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

nhan-manh-bang-mau-sac-cho-trang-hien-tai

Sử dụng icon để thay thế

Bạn cũng có thể chèn icon vào để thay thế cho Trang trướcTrang sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<nav aria-label="Page navigation example">
  <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="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

thay-the-bang-bieu-tuong

Căn chỉnh kích thước và vị trí

Để căn chỉnh kích thước ta dùng 2 thuộc tính sau:

  • pagination-sm: Kích thước thu nhỏ
  • pagination-lg: Kích thước lớn

Ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<nav aria-label="...">
	  <ul class="pagination pagination-sm">
		<li class="page-item active" aria-current="page">
		  <span class="page-link">1</span>
		</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>
	</nav>
	<hr>
	<nav aria-label="...">
	  <ul class="pagination pagination-lg">
		<li class="page-item active" aria-current="page">
		  <span class="page-link">1</span>
		</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>
	</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

tuy-chinh-kich-thuoc-cho-pagination

Để căn chỉnh vị trí ta sử dụng các thuộc tính sau:

  • justify-content-center: căn giữa
  • justify-content-start: căn trái
  • justify-content-end: căn phải
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
	<!-- Example Code -->
	<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-start">
	<li class="page-item disabled">
	  <a class="page-link">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="#">Next</a>
	</li>
	</ul>
	</nav>
	<hr>
	<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-center">
	<li class="page-item disabled">
	  <a class="page-link">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="#">Next</a>
	</li>
	</ul>
	</nav>
	<hr>
	<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-end">
	<li class="page-item disabled">
	  <a class="page-link">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="#">Next</a>
	</li>
	</ul>
	</nav>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

tuy-chinh-vi-tri-cho-pagination

Lời kết

Như vậy chúng ta đã cùng tìm hiểu về cách sử dụng Pagination trong Bootstrap để làm phân trang cho trang web. Hi vọng các bạn sẽ ứng dụng được vào dự án của mình.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi bài viết

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *