|
DataTables 是一个 jQuery 插件，可以更轻松地在网页上添加分页。
只需要添加记录列表，它就会自动调整数据并创建具有搜索和排序功能的分页。
有一些选项可用于实现AJAX 分页。
在本教程中，我将展示如何使用 PHP 在 DataTables 中实现 AJAX 分页。
1.表结构
创建employee表。
CREATE TABLE `employee` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`emp_name` varchar(80) NOT NULL,
`salary` varchar(20) NOT NULL,
`gender` varchar(10) NOT NULL,
`city` varchar(80) NOT NULL,
`email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2.配置
config.php为数据库创建一个连接。
代码
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3.下载并包含
- 从这里下载DataTables 。
- 在
<head>部分引用datatables.min.css和datatables.min.js，还包括 jQuery 库。 - 您也可以使用 CDN。
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
4.?HTML
创建<table id='empTable' class='display dataTable'>并添加列名?<thead>。
代码
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<!-- Table -->
<table id='empTable' class='display dataTable'>
<thead>
<tr>
<th>Employee name</th>
<th>Email</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
</table>
5.脚本
在?<table id='empTable'>上初始化 DataTable。
在方法中传递选项以启用服务器端处理并将 AJAX 发布请求发送到ajaxfile.php.
在columnsAJAX 成功回调时读取的选项传递字段名称。
代码
$(document).ready(function(){
$('#empTable').DataTable({
'processing': true,
'serverSide': true,
'serverMethod': 'post',
'ajax': {
'url':'ajaxfile.php'
},
'columns': [
{ data: 'emp_name' },
{ data: 'email' },
{ data: 'gender' },
{ data: 'salary' },
{ data: 'city' },
]
});
});
6.?PHP
创建一个新的ajaxfile.php.
读取$_POST值并存储在 AJAX 请求期间 DataTable 传递的变量中 - 绘制、开始、长度、顺序、列索引、列名、顺序和搜索。
如果$searchValue不为空，则准备搜索查询。
计算employee表中记录的总数。
使用employee表中的搜索过滤器计算记录总数。
两个计数在第一次返回相同的值。不同之处在于，当从 DataTable 中搜索值时，带有过滤器的记录计数将用于显示 – 从 DataTable 中的总记录中过滤的记录数。
从employee表中获取记录。
循环记录并$data使用关联数组初始化Array。在 Array 中，key 将与columnsDataTable 初始化时在option 中定义的相同。
准备$response一个具有 draw、iTotalRecords、iTotalDisplayRecords 和 aaData 键的数组。
返回$responseJSON 格式。
代码
<?php
## Database configuration
include 'config.php';
## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = mysqli_real_escape_string($con,$_POST['search']['value']); // Search value
## Search
$searchQuery = " ";
if($searchValue != ''){
$searchQuery = " and (emp_name like '%".$searchValue."%' or
email like '%".$searchValue."%' or
city like'%".$searchValue."%' ) ";
}
## Total number of records without filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];
## Total number of record with filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee WHERE 1 ".$searchQuery);
$records = mysqli_fetch_assoc($sel);
$totalRecordwithFilter = $records['allcount'];
## Fetch records
$empQuery = "select * from employee WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
$empRecords = mysqli_query($con, $empQuery);
$data = array();
while ($row = mysqli_fetch_assoc($empRecords)) {
$data[] = array(
"emp_name"=>$row['emp_name'],
"email"=>$row['email'],
"gender"=>$row['gender'],
"salary"=>$row['salary'],
"city"=>$row['city']
);
}
## Response
$response = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordwithFilter,
"aaData" => $data
);
echo json_encode($response);
7.结论
确保 AJAX 响应数据中的字段名称应与columnsDataTable 初始化期间数据中定义的字段名称相同，否则不会读取字段值。
serverMethod如果您想发送 GET 类型的 AJAX 请求，请删除选项，那么您还需要更新 AJAX 文件。
?
|