DataTables là một plug-in jQuery cung cấp một cách nhanh chóng và dễ dàng để liệt kê dữ liệu ở định dạng bảng trên trang web. Bạn có thể thêm chức năng sắp xếp, lọc và phân trang vào các bảng HTML với nỗ lực tối thiểu. Bên cạnh dữ liệu phía máy khách, DataTables cho phép tìm nạp dữ liệu phía máy chủ và liệt kê chúng trong bảng HTML với các tính năng tìm kiếm và phân trang
Khi bạn đang làm việc với một cơ sở dữ liệu lớn xử lý một lượng lớn dữ liệu, bạn phải cân nhắc sử dụng tùy chọn phía máy chủ trong DataTables. Với xử lý phía máy chủ, các hoạt động tìm kiếm, đặt hàng và phân trang được xử lý trên máy chủ. Vì vậy, công cụ Cơ sở dữ liệu có thể thực hiện các hành động khác nhau trên một tập dữ liệu lớn. Nếu bật tính năng xử lý phía máy chủ của DataTables, tất cả các bản ghi sẽ không được truy xuất từ cơ sở dữ liệu cùng một lúc. Thay vào đó, chỉ các bản ghi cụ thể và dữ liệu cần thiết được tìm nạp từ cơ sở dữ liệu. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách kích hoạt xử lý phía máy chủ trong DataTables với PHP và MySQL
Trong tập lệnh ví dụ, chúng tôi sẽ lấy dữ liệu của thành viên từ cơ sở dữ liệu và liệt kê chúng với DataTables. Các chức năng sau sẽ được triển khai trong Xử lý phía máy chủ của Datatables với PHP và MySQL
- Liệt kê dữ liệu từ cơ sở dữ liệu MySQL bằng Datatables Server-side Processing
- Thêm các tính năng tìm kiếm, lọc và phân trang vào bảng HTML với 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 members với một số trường cơ bản trong cơ sở dữ liệu MySQL. Dữ liệu sẽ được tìm nạp từ bảng này bằng cách xử lý phía máy chủ DataTables
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;
Mở rộng Bảng HTML với DataTables [chỉ mục. html]
Trong trang web này, dữ liệu của thành viên sẽ được liệt kê trong một bảng HTML với các tùy chọn tìm kiếm, lọc và phân trang 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.
Mã JavaScript.
Sử dụng phương thức DataTable[] để khởi tạo lớp Datatables. Bạn cần chỉ định bộ chọn [
Để kích hoạt xử lý phía máy chủ, hãy làm như sau
- Đặt tùy chọn 1 thành true
- Đặt tùy chọn 2 thành true
- Chỉ định URL của tập lệnh phía máy chủ [_______13] trong tùy chọn 0
Mã HTML.
Tạo bảng HTML và thêm bộ chọn [
First name
Last name
Email
Gender
Country
Created
Status
First name
Last name
Email
Gender
Country
Created
Status
Tập lệnh phía máy chủ [fetchData. php]
Tệp
3 được sử dụng để thực hiện xử lý phía máy chủ với PHP và MySQL. Để 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 [3]. Nó giúp lấy dữ liệu của thành viên từ cơ sở dữ liệu MySQL bằng PHP- Trong mảng 4, thông tin đăng nhập cơ sở dữ liệu [máy chủ, tên người dùng, mật khẩu và tên DB] được chỉ định
// Database connection info
$dbDetails = array[
'host' => 'localhost',
'user' => 'root',
'pass' => 'root',
'db' => 'codexworld'
];// DB table to use
$table = 'members';// Table's primary key
$primaryKey = 'id';// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database.
// The `dt` parameter represents the DataTables column identifier.
$columns = array[
array[ 'db' => 'first_name', 'dt' => 0 ],
array[ 'db' => 'last_name', 'dt' => 1 ],
array[ 'db' => 'email', 'dt' => 2 ],
array[ 'db' => 'gender', 'dt' => 3 ],
array[ 'db' => 'country', 'dt' => 4 ],
array[
'db' => 'created',
'dt' => 5,
'formatter' => function[ $d, $row ] {
return date[ 'jS M Y', strtotime[$d]];
}
],
array[
'db' => 'status',
'dt' => 6,
'formatter' => function[ $d, $row ] {
return [$d == 1]?'Active':'Inactive';
}
]
];// Include SQL query processing class
require 'ssp.class.php';// Output data as json format
echo json_encode[
SSP::simple[ $_GET, $dbDetails, $table, $primaryKey, $columns ]
];
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. 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
Hoạt động CRUD PHP mà không cần làm mới trang bằng jQuery, Ajax và MySQL
Sự kết luận
Mã ví dụ của chúng tôi sẽ giúp bạn thêm plugin DataTables với xử lý phía Máy chủ trên trang web. Bạn có thể dễ dàng tải dữ liệu từ cơ sở dữ liệu bằng PHP & MySQL và liệt kê chúng trong bảng HTML với một số tính năng hữu ích [tìm kiếm, lọc, sắp xếp và phân trang]. Ngoài các tính năng này, DataTables có nhiều tùy chọn khác nhau để nâng cao các bảng HTML với dữ liệu phía máy chủ
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?