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
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 section, you may specify certain options like showing the paging with page numbers or just four or two buttons, searching etc. In this example, the four button option is set:
1
"sPaginationType". "bs_four_button"
Xem mã hoàn chỉnh trên trang demo
Bản demo của số trang
Trong ví dụ này, chỉ có một tùy chọn duy nhất được sửa đổi so với ví dụ trên i. e
1
"sPaginationType". "bs_full"
Điều này được sử dụng trong mã jQuery. Mục đích là để hiển thị số trang cùng với di chuyển tiếp theo, trước đó, đầu tiên hoặc cuối cùng
Xem mã và xuất trực tuyến
Bản demo hiển thị số tiếp theo, trước đó và số trong Bootstrap có thể định dữ liệu
Bạn cũng có thể bỏ qua các tùy chọn đầu tiên và cuối cùng bằng cách sử dụng “sPaginationType”. “bs_normal” trong mã jQuery. Nghĩa là, thay giá trị bs_full bằng giá trị bs_normal
Bạn có thể thấy, các nút chỉ dành cho số trang và để di chuyển tiếp theo hoặc trước đó
Một bản demo chỉ di chuyển các nút tiếp theo và trước đó
Cuối cùng, bạn cũng chỉ có thể hiển thị các nút Tiếp theo và Trước đó. Điều này có thể được thực hiện bằng cách sử dụng “sPaginationType”. Tùy chọn “bs_two_button” trong mã jQuery
Xem đầu ra của mã và ví dụ
đọc liên quan. Trình cắm thêm dữ liệu jQuery với các hộp kiểm
Bản trình diễn thay đổi màu của mọi hàng khác
Bạn muốn thêm một số màu trong bảng cùng với các tính năng hữu ích?
Trong bản demo này, màu của mọi hàng khác được thay đổi thành lớp thành công tiêu chuẩn của Bootstrap i. e. màu xanh lá. Xem đầu ra của ví dụ này cùng với mã
For that, I just added background color for each odd row in the section using the .table-striped class which is specified in the