DataTables là một plugin jQuery hiện đại để thêm các điều khiển tương tác và nâng cao vào các bảng HTML cho một trang web. Đây là một plug-in rất dễ sử dụng với nhiều tùy chọn cho các thay đổi tùy chỉnh của nhà phát triển theo nhu cầu của ứng dụng. Các tính năng của plugin bao gồm phân trang, sắp xếp, tìm kiếm và sắp xếp nhiều cột
Trong bài viết này, chúng tôi sẽ chứng minh việc triển khai bộ lọc tìm kiếm theo cột cụ thể bằng cách sử dụng plugin DataTables. Thay vì thực hiện các thao tác tìm kiếm trên toàn bộ bảng, việc tìm kiếm chỉ được thực hiện trên một cột cụ thể để cải thiện hiệu suất của hệ thống
Tiếp cận. Trong ví dụ sau, DataTables sử dụng chi tiết sinh viên từ bảng HTML làm nguồn chính. Mỗi hàng trong bảng hiển thị chi tiết cho thông tin của một học sinh
- Một DataTable được khởi tạo
- Nhà phát triển có thể thiết lập các tính năng phân trang hoặc tìm kiếm theo nhu cầu như được hiển thị trong phần tập lệnh của mã
- API column[] được sử dụng để chọn tất cả các cột của bảng
- Flatten[] API được sử dụng để chuyển đổi cấu trúc mảng 2D thành mảng một chiều và phương thức each[] được sử dụng để thực hiện bất kỳ hành động nào trên từng cột đã chọn
- Danh sách lựa chọn được thêm vào mỗi tiêu đề cột
- Bất kỳ hành động nào được thực hiện khi thay đổi bất kỳ giá trị danh sách nào
- cột[]. API search[] được sử dụng để tìm kiếm giá trị đã chọn và API draw[] được sử dụng để phản ánh các thay đổi sau hành động trong bảng
- cột[]. cache[] API được sử dụng để lấy dữ liệu từ cột với phương thức sort[] để hiển thị dữ liệu đã được sắp xếp
- Tất cả các bước được thực hiện cho từng cột
Các tệp được biên dịch sẵn cần thiết để triển khai là
CDN CSS
//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript CDN
//code.jquery.com/jquery-3.5.1.js //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Ví dụ. Ví dụ sau minh họa cách tiếp cận trên hiển thị hoạt động của bộ lọc tìm kiếm theo cột cụ thể
HTML
//code.jquery.com/jquery-3.5.1.js //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js2_______6
//code.jquery.com/jquery-3.5.1.js //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js1
//code.jquery.com/jquery-3.5.1.js //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js4