使用 jQuery 和 DataTables 实现表单筛选数据-php教程-PHP中文网

使用 jQuery 和 DataTables 实现表单筛选数据

心靈之曲

发布： 2025-10-14 12:13:01

原创

882人浏览过

使用 jquery 和 datatables 实现表单筛选数据

本文旨在帮助开发者理解如何通过 jQuery 将表单数据传递给 DataTables，并利用这些数据作为筛选条件，从服务器端获取动态数据，最终实现表格数据的实时更新。重点讲解了如何使用 ajax.reload() 方法在表单提交后重新加载 DataTables，以及如何在 DataTables 的 ajax 配置中传递表单数据。

DataTables 是一款强大的 jQuery 表格插件，可以方便地实现表格的排序、分页、筛选等功能。结合服务器端的数据接口，我们可以构建动态更新的表格。本文将介绍如何通过一个 zuojiankuohaophpcnselect> 表单，将用户选择的条件传递给服务器端，并利用这些条件筛选 DataTables 显示的数据。

前端实现：HTML 结构和 JavaScript 代码

首先，我们需要一个包含 <select> 元素的 HTML 表单，以及一个用于显示数据的 DataTables 表格。以下是 index.php 的相关代码片段：

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

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

登录后复制

接下来，使用 jQuery 初始化 DataTables，并配置 ajax 选项，以便从服务器端获取数据。关键在于如何将表单数据传递给服务器端。

$(document).ready(function() {
    var table = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            "dataSrc": "",
            "data": function(d) {
                var frm_data = $('#frm').serializeArray(); // Corrected selector here
                $.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();
    });
});

登录后复制

代码解释：

$('#frm').serializeArray()：将表单数据序列化为 JavaScript 对象数组，方便传递给服务器。
$.each(frm_data, function(key, val) { d[val.name] = val.value; });：遍历表单数据，将每个字段的值添加到 DataTables 的 data 对象中。
$("#frm").submit(function(e) { ... });：监听表单的 submit 事件，阻止默认提交行为，并使用 table.ajax.reload() 重新加载 DataTables。table变量需要定义在$(document).ready函数作用域内。
e.preventDefault(): 阻止表单的默认提交行为，防止页面刷新。
table.ajax.reload(): 重新加载 DataTables 的数据，触发 ajax 配置中的 data 函数，从而将最新的表单数据传递给服务器。

后端实现：PHP 代码

表单大师AI

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

查看详情

服务器端 PHP 脚本 (json.php) 接收来自 DataTables 的数据，并根据这些数据查询数据库。

<?php
  $servername = "your_servername";
  $username = "your_username";
  $password = "your_password";
  $dbname = "your_dbname";

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);

  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  $selectedplace = $_POST['selectplace']; // Corrected variable name here
  $sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"; // Improved SQL query for security

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

  $data = array();
  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            "place_id"=>$row['place_id'], // Assuming 'place_id' exists in your table
            "place_name"=> $row['place_name'],
            "total_visitor"=> $row['total_visitor']
        );
    }
  }
  echo json_encode($data);

  $conn->close();
?>

登录后复制

代码解释：

$_POST['selectplace']：从 $_POST 数组中获取 selectplace 字段的值，该值由前端表单传递过来。 注意变量名需要与前端的name属性一致。
$sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"：构建 SQL 查询语句，使用 WHERE 子句根据 $selectedplace 的值筛选数据。务必注意SQL注入风险，这里只是示例，实际应用中请使用预处理语句或参数化查询。
echo json_encode($data)：将查询结果编码为 JSON 格式，并输出到客户端。

注意事项：

安全性： 在实际应用中，务必对用户输入进行验证和过滤，以防止 SQL 注入攻击。建议使用预处理语句或参数化查询来构建 SQL 语句。
错误处理： 添加错误处理机制，例如检查数据库连接是否成功，查询是否执行成功等。
调试： 使用浏览器的开发者工具可以方便地调试 JavaScript 代码和查看网络请求。
变量名一致： 确保前端和后端代码中使用的变量名一致，例如表单字段的 name 属性和 PHP 脚本中 $_POST 数组的键名。
数据库配置： 确保 PHP 脚本中的数据库连接信息正确。

总结

通过以上步骤，我们可以实现通过表单筛选 DataTables 显示的数据。关键在于使用 ajax.reload() 方法在表单提交后重新加载 DataTables，以及如何在 DataTables 的 ajax 配置中传递表单数据。同时，需要注意安全性和错误处理，以确保应用程序的稳定性和安全性。通过理解和应用这些技术，开发者可以构建更加动态和交互性强的 Web 应用。

以上就是使用 jQuery 和 DataTables 实现表单筛选数据的详细内容，更多请关注php中文网其它相关文章！