使用PHP和DataTables创建分页数据表格-php教程-PHP中文网

使用PHP和DataTables创建分页数据表格

WBOY

发布： 2023-05-11 17:03:12

原创

1977人浏览过

在web开发中，数据表格是我们经常需要用到的组件。而分页，则是在处理大量数据时常见的需求之一。如果要实现一个大量数据的分页数据表格，很多人可能会选择使用前端框架比如vue、react或者angular。然而，使用后端语言php和前端插件datatables也可以轻松创建分页数据表格，并且更加灵活和可定制性更高。下面我们就来看一下如何利用php和datatables创建分页数据表格。

首先，我们需要一个用于呈现数据的数据源。由于PHP是一种非常强大的服务器端语言，可以通过连接数据库或者读取文件等方式获取数据。在本文中，我们将用PHP连接MySQL数据库来获取数据，并且将其以JSON格式输出，供DataTables渲染数据表格。为了方便演示，我们使用一个假数据表。可以通过如下代码创建一个名为"users"的数据表。

CREATE TABLE users (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(30) NOT NULL,
    age INT(3) NOT NULL,
    email VARCHAR(50),
    registration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

登录后复制

接下来，我们将在PHP文件中编写数据源接口。代码如下：

<?php
header('Content-Type: application/json');

$servername = "localhost"; // 数据库服务器名
$username = "username"; // 数据库用户名
$password = "password"; // 数据库密码
$dbname = "myDB"; // 数据库名

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 

// 查询数据总数
$sql = "SELECT COUNT(*) FROM users";
$result = $conn->query($sql);
$row = $result->fetch_row();
$total_count = $row[0];

// 分页参数
$limit = $_GET["length"];
$offset = $_GET["start"];

// 查询当前页数据
$sql = "SELECT id, name, age, email, registration_date FROM users LIMIT $offset, $limit";
$result = $conn->query($sql);

// 构造JSON数据
$data = [];
while($row = $result->fetch_assoc()) {
    $data[] = $row;
}
echo json_encode(array(
    "draw" => $_GET["draw"], 
    "recordsTotal" => $total_count, 
    "recordsFiltered" => $total_count, 
    "data" => $data
));

$conn->close();
?>

登录后复制

上述代码中，我们首先连接数据库，并查询数据总数。接着，从GET参数中获取分页参数，并根据分页参数查询当前页数据。最后，将数据构造成JSON格式，并输出给DataTables。

接下来，我们就需要引入DataTables插件，并对其进行配置和初始化。可以通过如下代码引入DataTables和jQuery。

立即学习“PHP免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- 引入 DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

登录后复制

接着，在HTML中创建一个表格DOM节点，并添加如下代码进行DataTables初始化。

// 初始化 DataTables
$(document).ready(function() {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "data.php"
    });
});

登录后复制

在这里，我们设置了DataTables的processing参数为true，表示开启加载提示。serverSide参数也设置为true，表示开启服务器端模式。最后，ajax参数设置为"数据源接口URL"，指向我们刚才编写的PHP文件。这样，当用户浏览数据表格的时候，DataTables将会以分页查询的方式从服务器上获取数据，并呈现在表格中。

至此，一个包含分页功能的数据表格就被成功地创建出来了。以上便是使用PHP和DataTables创建分页数据表格的基本思路和代码演示。读者可以根据自己的具体需求来进行调整和改进。

以上就是使用PHP和DataTables创建分页数据表格的详细内容，更多请关注php中文网其它相关文章！