通过表单选择更新 DataTables 数据-php教程-PHP中文网

通过表单选择更新 DataTables 数据

聖光之護

发布： 2025-10-12 09:08:25

原创

199人浏览过

通过表单选择更新 datatables 数据

本文旨在指导开发者如何通过 HTML 表单的选择，动态更新 DataTables 的数据。我们将详细讲解如何使用 jQuery 监听表单提交事件，并将表单数据传递给服务器端，最终刷新 DataTables 以显示更新后的数据。通过本文，你将掌握一种常用的动态数据展示技巧。

DataTables 是一款强大的 jQuery 表格插件，可以提供排序、分页、过滤等功能。在实际应用中，我们经常需要根据用户的选择动态更新表格数据。以下将详细介绍如何实现这一功能。

前端实现

HTML 表单:

首先，我们需要创建一个 HTML 表单，包含一个 zuojiankuohaophpcnselect> 元素和一个提交按钮。

<form method="POST" id="frm">
    <select name="selectplace">
        <option value="PLACE 1">PLACE 1</option>
        <option value="PLACE 2">PLACE 2</option>
        <option value="PLACE 3">PLACE 3</option>
    </select>
    <button type="submit" name="submitPlace">SUBMIT</button>
</form>

登录后复制

以及用于展示数据的 DataTables 表格：

<div class="table-responsive">
    <table class="table table-bordered table-striped text-center" id="place-table">
        <thead>
            <tr>
                <th>PLACE #</th>
                <th>PLACE NAME</th>
                <th>TOTAL VISITORS</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>PLACE #</th>
                <th>PLACE NAME</th>
                <th>TOTAL VISITORS</th>
            </tr>
        </tfoot>
    </table>
</div>

登录后复制

DataTables 初始化:

使用 jQuery 初始化 DataTables，并配置 ajax 选项。

表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情
```
$(document).ready(function() {
    var table = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            "dataSrc": "",
            "data": function(d) {
                var frm_data = $('#frm').serializeArray(); // 使用 ID 选择器
                $.each(frm_data, function(key, val) {
                    d[val.name] = val.value;
                });
            }
        },
        columns: [
            { data: 'place_id' },
            { data: 'place_name' },
            { data: 'total_visitor' }
        ]
    });

    // 监听表单提交事件
    $("#frm").submit(function(e) {
        e.preventDefault(); // 阻止默认的表单提交行为
        table.ajax.reload(); // 重新加载 DataTables 数据
    });
});
```
登录后复制
关键点:
- url: 指定服务器端处理数据请求的 URL (json.php)。
- dataSrc: 指定从服务器返回的数据中，包含表格数据的属性。如果服务器直接返回数组，则设置为 ""。
- data: 这是一个函数，允许我们在每次 AJAX 请求之前修改要发送的数据。在这里，我们使用 $('#frm').serializeArray() 获取表单数据，并将其添加到 DataTables 的 AJAX 请求中。使用ID选择器 #frm 可以确保正确选取到对应的form表单。
- columns: 定义表格的列，并指定每一列对应的数据源。
- 使用 preventDefault() 阻止了表单的默认提交行为，防止页面跳转。
- table.ajax.reload() 用于重新加载 DataTables 的数据，触发 AJAX 请求。

后端实现 (json.php)

接收表单数据:

在 json.php 中，我们需要接收从前端传递过来的表单数据，并根据这些数据构建 SQL 查询语句。

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

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

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

$selectedplace = $_POST['selectplace']; // 获取 selectplace 的值

// 预防 SQL 注入
$selectedplace = $conn->real_escape_string($selectedplace);

$sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"; // 使用 place_name 进行匹配

$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            "place_id"=>$row['id'],
            "place_name"=> $row['place_name'],
            "total_visitor"=> $row['total_visitor']
        );
    }
}

echo json_encode($data);

$conn->close();
?>

登录后复制

关键点: