| Bootstrap không có thành phần cho phép lọc. Tuy nhiên, chúng ta có thể sử dụng jQuery để lọc/tìm kiếm các phần tử
Bảng lọcThực hiện tìm kiếm không phân biệt chữ hoa chữ thường đối với các mục trong bảng Ví dụNhập nội dung nào đó vào trường nhập liệu để tìm kiếm trong bảng tên, họ hoặc email
FirstnameLastnameEmailJohnDoejohn@example. comMaryMoemary@mail. com JulyDooleyjuly@greatstuff. comAnjaRavendalea_r@test. comjQueryTự mình thử »Ví dụ giải thích. Chúng tôi sử dụng jQuery để lặp qua từng hàng của bảng để kiểm tra xem có bất kỳ giá trị văn bản nào khớp với giá trị của trường nhập không. Phương pháp toggle() ẩn hàng (display:none) không khớp với tìm kiếm. Chúng tôi sử dụng phương pháp toLowerCase() để chuyển đổi văn bản thành chữ thường, điều này làm cho trường hợp tìm kiếm không nhạy cảm (cho phép "john", "John" và thậm chí là "JOHN" trên tìm kiếm)
const data = {
columns: [
{
label: 'Name',
field: 'name'
},
'Position',
'Office',
'Age',
'Start date',
'Salary',
],
rows: [
["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"],
["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"],
["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"]
],
};
const instance = new mdb.Datatable(document.getElementById('datatable'), data)
const advancedSearchInput = document.getElementById('advanced-search-input');
const search = (value) => {
let [phrase, columns] = value.split(' in:').map((str) => str.trim());
if (columns) {
columns = columns.split(',').map((str) => str.toLowerCase().trim());
}
instance.search(phrase, columns);
}
document.getElementById('advanced-search-button').addEventListener('click', (e) => {
search(advancedSearchInput.value)
});
advancedSearchInput.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
search(e.target.value);
}
})
Đây là một tiện ích mở rộng cho plugin jquery bảng Bootstrap, dựa trên một tiện ích mở rộng khác Điều khiển bộ lọc bảng, cung cấp các điều khiển bộ lọc cột cho phía máy chủ và phía máy khách Người giới thiệuChọn2 - v. 3 để chọn kiểm soát bộ lọc jQuery UI - v. 1. 10 cho kiểm soát bộ lọc datepicker Ví dụ. Điều khiển đơn giảnKhởi tạo điều khiển bộ lọc bảng bootstrap cơ bản Mặt hàng ID Mặt hàng Tên mặt hàng Giá mặt hàng NgàyVí dụ. điều khiển phạm viĐiều khiển bộ lọc bảng Bootstrap khởi tạo với phạm vi Nhớ. Tất cả các điều khiển phạm vi (input_range, select_range và datepicker_range) chỉ dành cho phía máy chủ Mặt hàng ID Mặt hàng Tên mặt hàng Giá mặt hàng Ngày Đặt thành e. g. data-filter-control9 để cho phép bộ lọc đầu vào tùy chỉnh trong phần tử có id Boolean0. Mỗi phần tử bộ lọc (nhập hoặc chọn) phải có lớp sau Boolean1 (phải được thay thế bằng [Trường] đã xác định(https. //bootstrap-bảng. com/docs/api/column-options/#field) name) Mặc định. toggle()0 bộ lọcDataCollectorThuộc tính. Boolean3 loại. Boolean4 Chi tiết Thu thập dữ liệu sẽ được thêm vào bộ lọc đã chọn, để lọc qua e. g. các nhãn được phân tách bằng dấu phẩy và được hiển thị bằng bộ định dạng Mặc định. data-filter-control6
bộ lọcKiểm soátNhiều Tìm kiếmfilterControlMultipleSearchDelimitertìm kiếmOnEnterKeyshowFilterControlSwitchsắp xếpSelectOptionstùy chọn cộtbộ lọcKiểm soátThuộc tính. data-filter-control loại. data-filter-control2 Chi tiết Đặt toLowerCase()0. hiển thị điều khiển đầu vào, toLowerCase()7. hiển thị một điều khiển chọn, toLowerCase()70. hiển thị một điều khiển datepicker html5 Mặc định. data-filter-control6
bộ lọcKiểm soátGiữ chỗthuộc tính. toLowerCase()72 loại. data-filter-control2 Chi tiết Đặt cài đặt này để chỉ hiển thị trình giữ chỗ trong điều khiển bộ lọc đầu vào Mặc định. toLowerCase()74
bộ lọcTìm kiếm tùy chỉnhThuộc tính. toLowerCase()75 loại. toLowerCase()76 Chi tiết Chức năng tìm kiếm tùy chỉnh được thực hiện thay vì chức năng tìm kiếm tích hợp, có bốn tham số toLowerCase()77. văn bản tìm kiếmtoLowerCase()78. giá trị của cột để so sánhtoLowerCase()79. tên trường cộttoggle()00. dữ liệu bảng
Trả về toggle()0 để lọc ra cột/hàng hiện tại. Trả về toggle()6 để không lọc ra cột/hàng hiện tại. Quay lại toggle()03 để bỏ qua tìm kiếm tùy chỉnh cho giá trị hiện tại Mặc định. data-filter-control6
bộ lọcDữ liệuThuộc tính. toggle()05 loại. data-filter-control2 Chi tiết Đặt các giá trị bộ lọc chọn tùy chỉnh, sử dụng toggle()07 để tải từ một biến toggle()08 để tải từ một đối tượng toggle()09 để tải từ tệp json từ xa select_range80 để tải từ chuỗi json. select_range81 để tải từ một chức năng Mặc định. data-filter-control6
Thuộc tính. select_range83 loại. select_range84 Chi tiết Nếu tùy chọn bộ chọn ngày được đặt, hãy sử dụng tùy chọn này để định cấu hình bộ chọn ngày với các tùy chọn gốc. Sử dụng cách này. select_range85. Để biết thêm thông tin, hãy truy cập tài liệu này Mặc định. data-filter-control6
bộ lọcMặc địnhThuộc tính. select_range87 loại. data-filter-control2 Chi tiết Đặt giá trị mặc định của bộ lọc Mặc định. data-filter-control6
bộ lọcOrderBythuộc tính. Boolean0 loại. data-filter-control2 Chi tiết Đặt tùy chọn này để sắp xếp thứ tự các tùy chọn trong điều khiển chọn tăng dần (______82), giảm dần (Boolean3) hoặc theo thứ tự do máy chủ cung cấp (Boolean4)
|
