Làm cách nào để sử dụng phân trang Bootstrap trong bảng?

Trong hướng dẫn về bảng của Bootstrap, tôi đã chỉ cho bạn cách tạo các bảng đơn giản bằng cách sử dụng các lớp dựng sẵn của Bootstrap. Trong hướng dẫn này, một plug-in được sử dụng để tạo các bảng dữ liệu có các tính năng hữu ích như phân trang, sắp xếp, tìm kiếm, v.v.

Đặc trưng

• Người dùng có thể chọn số lượng hàng sẽ hiển thị tại một thời điểm bằng cách chọn từ danh sách thả xuống. g. 10, 25, 50 hoặc 100 hàng
• Các hàng của bảng có thể được sắp xếp bằng cách nhấp vào tiêu đề cột
• Nó cũng có tính năng phân trang, vì vậy nếu người dùng chọn 10 hàng và bảng có 50 hàng, các mũi tên sẽ được hiển thị để di chuyển tiếp theo hoặc trước đó
• Nó cũng có một cơ sở tìm kiếm. Chỉ cần nhập cụm từ tìm kiếm và các hàng trong bảng sẽ được lọc nhanh chóng
• Ở dưới cùng, tổng số hàng cùng với các số hiện tại cũng được hiển thị

Xem các ví dụ sau để hiểu thêm về nó

Tương thích với. Bootstrap 3, Bootstrap 4, Bootstrap 5

 

Bản demo của dữ liệu có thể phân trang và các tùy chọn tìm kiếm

Trong ví dụ này, một bảng dữ liệu Bootstrap được tạo với một số tùy chọn như hiển thị 10 hàng ban đầu, tìm kiếm, tùy chọn sắp xếp và phân trang. Việc phân trang cho phép di chuyển các trang đầu tiên, cuối cùng, tiếp theo và trước đó. Để hiển thị số "trang" cùng với các tùy chọn này, hãy xem ví dụ tiếp theo

Xem bản demo và mã trực tuyến

Bạn cũng nên đọc. Giải pháp Bảng dữ liệu AngularJS / AngularJS2

Thiết lập plug-in bảng dữ liệu

Đây là cách trình cắm có thể truy cập dữ liệu Bootstrap được thiết lập

First of all, you need to include the Bootstrap and plug-in’s CSS file in the section (See the download link in credit section at the bottom):

Đặt nó ở vị trí mong muốn

Thứ hai, ngay phía trên thẻ , đặt thư viện jQuery, tệp Bootstrap JS, jquery. bảng dữ liệu. tối thiểu. js và tệp JS của trình cắm thêm này

Lý do tại sao bạn cần bao gồm tệp JS dataTables là trình cắm này sử dụng dataTable bên dưới cho một số tính năng

Trong phần đánh dấu, hãy tạo thẻ bảng HTML với ít lớp hơn như datatable, table table-striped, v.v., tiếp theo là tạo tiêu đề bảng và dữ liệu

In the