DataTables PHP AJAX 分页

最新推荐文章于 2024-05-25 09:50:59 发布

allway2

最新推荐文章于 2024-05-25 09:50:59 发布

阅读量944

点赞数

文章标签： java python 开发语言

本文链接：https://blog.csdn.net/allway2/article/details/121501999

版权

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 文件。

allway2

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DataTables PHP AJAX 分页

DataTables 是一个 jQuery 插件，可以更轻松地在网页上添加分页。只需要添加记录列表，它就会自动调整数据并创建具有搜索和排序功能的分页。有一些选项可用于实现AJAX 分页。在本教程中，我将展示如何使用 PHP 在 DataTables 中实现 AJAX 分页。1.表结构创建employee表。CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_
复制链接

扫一扫