DataTables PHP AJAX 分页

article/2025/10/20 9:29:36

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);