Cách sử dụng [ví dụ trên trang này]
$[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ìm nạp và liệt kê dữ liệu từ cơ sở dữ liệu MySQL bằng cách sử dụng Xử lý phía máy chủ Datatables
- Thêm tính năng sắp xếp và phân trang vào bảng HTML với Datatables
- Thêm đầu vào tìm kiếm và bộ lọc tùy chỉnh vào 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.
Bao gồm các tệp thư viện jQuery và DataTables.
Bảng HTML có Đầu vào Tìm kiếm và Bộ lọc.
Tạo bảng HTML và thêm bộ chọn [
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.
- Thêm trường nhập tìm kiếm và bộ lọc thả xuống để sắp xếp bản ghi theo giới tính
First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created Status
Đính kèm bảng dữ liệu vào bảng HTML.
Khởi tạo lớp API DataTables bằng phương thứ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;3 và định cấu hình đối tượng bảng.
- Để tắt tìm kiếm mặc định, hãy đặt tùy chọn
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;
4 thànhCREATE 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;
5 - Để kích hoạt xử lý phía máy chủ,
- Đặt tùy chọn
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;
6 thànhCREATE 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;
7 - Đặt tùy chọn
0 thành
First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created StatusCREATE 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;
7 - Chỉ định URL tập lệnh phía máy chủ [
2] trong tùy chọn
3 của đối tượng
First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created Status
4
First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created Status
- Đặt tùy chọn
- Để bật tìm kiếm tùy chỉnh và bộ lọc, hãy sử dụng phương pháp
5
First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created Status- Chỉ định tên trường tùy chỉnh và chọn giá trị đầu vào
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 [First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created Status
7]First name Last name Email Gender Country Created Status First name Last name Email Gender Country Created Status
- Hàm simple[] của lớp SSP giúp lấy dữ liệu thành viên từ cơ sở dữ liệu dựa trên truy vấn tìm kiếm và lọc bằng PHP và 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;0
Thư viện SSP
Lớ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ận
Tậ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?