Làm cách nào để sử dụng bộ lọc DataTables trong các trình duyệt không hỗ trợ bộ lọc?
Cách sử dụng (ví dụ trên trang này) Show $(document).ready(function () { 'use strict'; var oTable, oTable2; oTable = $('#example').DataTable({ stateSave: true }); //---------------------------------------------- //notice the new yadcf API for init the filters: //---------------------------------------------- yadcf.init(oTable, [{ column_number: 0 }, { column_number: 1, filter_type: "range_number_slider" }, { column_number: 2, filter_type: "date" }, { column_number: 3, filter_type: "auto_complete", text_data_delimiter: "," }, { column_number: 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag" }]); oTable2 = $('#entrys_table').DataTable({ "responsive": true, "processing": true, "ajax": "resources/sources/deep.txt", "columns": [{ "data": "engine" }, { "data": "browser" }, { "data": "platform.inner" }, { "data": "platform.details.0" }, { "data": "platform.details.1" }] }); //---------------------------------------------- //notice the new yadcf API for init the filters: //---------------------------------------------- yadcf.init(oTable2, [{ column_number: 0 }, { column_number: 1, filter_type: "text", exclude: true, exclude_label: '!(not)' }, { column_number: 2, filter_type: "auto_complete" }, { column_number: 3, filter_type: "range_number_slider", ignore_char: "-" }, { column_number: 4 }]); yadcf.exFilterColumn(oTable2, [[0, "Misc"]]); yadcf.initMultipleTables([oTable, oTable2], [{ filter_container_id: 'multi-table-filter', filter_default_label: 'Filter all tables!' }]); }); Plugin DataTables jQuery cung cấp một cách nhanh chóng và dễ dàng để hiển thị danh sách dữ liệu ở định dạng bảng trên trang web. Có thể dễ dàng thêm chức năng tìm kiếm, lọc và phân trang vào bảng HTML bằng DataTables. Sử dụng quá trình xử lý phía máy chủ của DataTables, bạn có thể tìm nạp dữ liệu động từ cơ sở dữ liệu và liệt kê chúng trong một bảng HTML với chức năng tìm kiếm, sắp xếp và phân trang Nói chung, các tùy chọn tìm kiếm và bộ lọc mặc định được sử dụng đi kèm với DataTables. Tuy nhiên, bạn có thể sử dụng đầu vào bộ lọc và tìm kiếm tùy chỉnh với API DataTables. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm bộ lọc và tìm kiếm tùy chỉnh với Xử lý phía máy chủ DataTables bằng PHP và MySQL Trong mã ví dụ, chúng tôi sẽ tìm nạp dữ liệu của thành viên từ cơ sở dữ liệu và liệt kê chúng với đầu vào bộ lọc và tìm kiếm tùy chỉnh trong DataTables
Tạo bảng cơ sở dữ liệuĐể lưu trữ thông tin của thành viên, cần có một bảng trong cơ sở dữ liệu. SQL sau đây tạo một bảng CREATE TABLE `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL, `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;1 với một số trường cơ bản trong cơ sở dữ liệu MySQL CREATE TABLE `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL, `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; Đính kèm DataTables vào Bảng HTML với Bộ lọc và Tìm kiếm Tùy chỉnh (chỉ mục. html)Trong trang web này, dữ liệu động sẽ được liệt kê trong bảng HTML với các tùy chọn tìm kiếm và bộ lọc tùy chỉnh bằng plugin DataTables jQuery Thư viện JS và CSS của DataTables. Bảng HTML có Đầu vào Tìm kiếm và Bộ lọc. CREATE TABLE `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL, `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;2) để đính kèm DataTables vào thành phần này.
Đính kèm bảng dữ liệu vào bảng HTML. CREATE TABLE `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL, `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;3 và định cấu hình đối tượng bảng.
Tập lệnh phía máy chủ (fetchData. php)Tệp 2 được sử dụng để thực hiện xử lý phía máy chủ với tìm kiếm và lọc. Để làm cho quá trình xây dựng truy vấn SQL dễ dàng hơn, chúng ta sẽ sử dụng lớp SSP ( 7)
CREATE TABLE `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `gender` enum('Male','Female') COLLATE utf8_unicode_ci NOT NULL, `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;0 Thư viện SSPLớp SSP xử lý các hoạt động liên quan đến cơ sở dữ liệu. Nó chứa một số chức năng trợ giúp để xây dựng các truy vấn SQL để xử lý phía máy chủ DataTables với tìm kiếm và bộ lọc. Bạn có thể xem mã của thư viện SSP từ đây Lưu ý rằng. Thư viện này và tất cả các tệp cần thiết được bao gồm trong mã nguồn, bạn không cần tải xuống riêng Lọc phía máy chủ bằng jQuery Ajax PHP và MySQL Sự kết luậnTập lệnh ví dụ này giúp bạn dễ dàng thêm các tùy chọn tìm kiếm và bộ lọc tùy chỉnh vào plugin DataTables. Bạn có thể bật DataTables xử lý phía máy chủ và thêm đầu vào tùy chỉnh để tìm kiếm, lọc, sắp xếp bản ghi. Ngoài ra, bảng HTML và danh sách dữ liệu có thể được tùy chỉnh dễ dàng theo nhu cầu của bạn. DataTables API cung cấp các tùy chọn cấu hình khác nhau để nâng cao bảng với dữ liệu phía máy chủ từ cơ sở dữ liệu Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không? |