通过分页，你可以以一种有效的方式在页面上显示大量的数据。
你可以使用DataTables jQuery插件轻松实现这一点。
在本教程中，我展示了如何使用PHP从PostgreSQL数据库中创建带搜索和排序的DataTables AJAX分页。
内容
1.表 的结构
我在这个例子中使用了employees 表。它有以下的结构 -
CREATE TABLE employees (
id serial PRIMARY KEY,
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
)
2.配 置
为数据库配置创建一个config.php 。
完成的代码
<?php
$host = "localhost";
$user = "postgres";
$password = "root";
$dbname = "tutorial";
$con = pg_connect("host=$host dbname=$dbname user=$user password=$password");
if (!$con) {
die('Connection failed.');
}
3.下 载和包含
- 从这里下载Datatables。
- 包括
datatables.min.css，jQuery库，和datatables.min.js。 - 你也可以使用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.6.0/jquery.min.js"></script>
<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
4.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.6.0/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.P HP
创建ajaxfile.php 文件。
读取DataTables的POST值并将其分配给变量。
从employees 表中计算有和没有搜索过滤器的总记录。
从employees 表中获取记录，并用数值初始化$data 数组。
注意在初始化 DataTables 时，数组键名必须与
columns选项中定义的相同。
用所需的值初始化$response 数组，并以JSON格式返回。
完成的代码
<?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 = $_POST['search']['value']; // Search value
## Search
$searchQuery = "id>$1";
$searchQueryVal = array();
$searchQueryVal[] = 0;
if($searchValue != ''){
$searchQuery .= " and (emp_name ilike $2 or
email ilike $3 or
city ilike $4 ) ";
$searchQueryVal[] = '%'.$searchValue.'%';
$searchQueryVal[] = '%'.$searchValue.'%';
$searchQueryVal[] = '%'.$searchValue.'%';
}
## Total number of records without filter
$sql = "select count(*) as allcount from employees";
$result = pg_query($con,$sql);
$records = pg_fetch_assoc($result);
$totalRecords = $records['allcount'];
## Total number of record with filter
$sql = "select count(*) as allcount from employees where ".$searchQuery;
$result = pg_query_params($con,$sql,$searchQueryVal);
$records = pg_fetch_assoc($result);
$totalRecordwithFilter = $records['allcount'];
## Fetch records
$sql = "select * from employees where ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit $rowperpage OFFSET $row";
$empRecords = pg_query_params($con,$sql,$searchQueryVal);
$data = array();
while ($row = pg_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);
6. jQuery
在<table id='empTable'> 上初始化DataTables。
启用服务器端处理并使用选项设置POST方法。发送AJAX请求到'ajaxfile.php' 。
在columns 选项中传递键名，在AJAX成功回调时被读取。
完成的代码
$(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' },
]
});
});
7.输 出
8.总 结
如果你在加载页面时得到JSON错误，那么再次检查SQL查询和返回响应，并使用浏览器网络标签进行调试。
你可以在这里查看本教程的MySQL版本。
