jQuery DataTables 表单筛选实战教程

本文档旨在提供一个清晰的教程，指导开发者如何利用 jQuery 和 DataTables 组件，通过 HTML 表单（特别是 元素）动态地向服务器传递数据，并根据这些数据筛选 DataTables 中显示的内容。我们将详细讲解前端 JavaScript 代码的编写，以及后端 PHP 脚本的处理，确保数据能够正确传递并用于数据库查询，最终实现动态更新 DataTables 的功能。

前端实现：jQuery 和 DataTables 的集成

首先，我们需要在 HTML 中创建一个表单，包含一个

元素和一个提交按钮。这个表单将用于选择需要筛选的数据。

    
        PLACE 1
        PLACE 2
        PLACE 3
    
    SUBMIT



    

        

            

                
PLACE #
                
PLACE NAME
                
TOTAL VISITORS
            
        
        

            

                
PLACE #
                
PLACE NAME
                
TOTAL VISITORS
            
        
    

接下来，使用 jQuery 和 DataTables 初始化表格，并配置 AJAX 数据源。关键在于，我们需要在表单提交时重新加载 DataTables 的数据，并将表单数据传递给服务器。

$(document).ready(function() {
    var table = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            "dataSrc": "",
            "data": function(d) {
                // 获取表单数据
                var frm_data = $('#frm').serialize();
                // 将表单数据添加到 AJAX 请求中
                return frm_data;
            }
        },
        columns: [
            { data: 'place_id' },
            { data: 'place_name' },
            { data: 'total_visitor' }
        ]
    });

    // 监听表单提交事件
    $("#frm").submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        table.ajax.reload(); // 重新加载 DataTables 数据
    });
});

代码解释：

• $('#place-table').DataTable({...})：初始化 DataTables，并配置 AJAX 数据源。
• url: "json.php"：指定服务器端处理数据的 PHP 文件。
• dataSrc: ""：指定返回的数据源，这里假设服务器直接返回数组。
• data: function(d) { ... }：这个函数用于在 AJAX 请求发送之前，修改传递给服务器的数据。
• $('#frm').serialize()：将表单数据序列化为 URL 编码的字符串，例如："selectplace=PLACE+1"。
• $("#frm").submit(function(e) { ... })：监听表单的提交事件。
• e.preventDefault()：阻止表单的默认提交行为，防止页面跳转。
• table.ajax.reload()：重新加载 DataTables 的数据。

注意事项：

• 确保 DataTables 已经正确引入到项目中。
• $('#frm').serialize() 是一个方便的方法，可以将表单数据转换为字符串，但需要确保表单元素具有 name 属性。
• e.preventDefault() 非常重要，可以防止表单提交导致页面刷新。
• 定义var table = $('#place-table').DataTable({...})，将DataTable对象赋值给变量table，以便在后续的table.ajax.reload()中使用。

后端实现：PHP 处理数据和查询数据库

服务器端 PHP 脚本 json.php 负责接收表单数据，查询数据库，并将结果以 JSON 格式返回。

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

  // 获取 POST 请求中的 selectplace 值
  $selectedplace = $_POST['selectplace'];

  // 构建 SQL 查询语句，使用预处理语句防止 SQL 注入
  $sql = "SELECT id, place_name, total_visitor FROM placestable WHERE place_name = ?";
  $stmt = $conn->prepare($sql);
  $stmt->bind_param("s", $selectedplace); // "s" 表示字符串类型

  // 执行查询
  $stmt->execute();
  $result = $stmt->get_result();

  // 将结果转换为数组
  $data = array();
  while($row = $result->fetch_assoc()) {
      $data[] = array(
          "place_id"=>$row['id'],
          "place_name"=> $row['place_name'],
          "total_visitor"=> $row['total_visitor'],
      );
  }

  // 设置响应头为 JSON 格式
  header('Content-Type: application/json');

  // 将数组编码为 JSON 字符串并输出
  echo json_encode($data);

  // 关闭连接
  $stmt->close();
  $conn->close();
?>

代码解释：

• $_POST['selectplace']：获取通过 POST 请求传递的 selectplace 的值。
• $sql = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"：构建 SQL 查询语句，根据 selectplace 的值筛选数据。 注意：这里使用了预处理语句来防止SQL注入。
• mysqli_query($conn, $sql)：执行 SQL 查询。
• mysqli_fetch_assoc($result)：从结果集中获取一行数据，并以关联数组的形式返回。
• echo json_encode($data)：将 PHP 数组编码为 JSON 字符串，并输出到客户端。
• header('Content-Type: application/json');：设置HTTP响应头，告诉浏览器返回的是JSON数据。
• 数据库连接信息: 请将代码中的数据库连接信息替换成你自己的。

安全性提示：

• SQL 注入： 直接将用户输入的值拼接到 SQL 语句中存在 SQL 注入的风险。强烈建议使用预处理语句（Prepared Statements）来防止 SQL 注入。 上面的代码已经修改为使用预处理语句。

总结

通过以上步骤，我们成功地实现了使用 jQuery 和 DataTables 传递表单数据进行动态数据筛选的功能。 关键在于前端使用 jQuery 监听表单提交事件，并将表单数据通过 AJAX 传递给后端，后端 PHP 脚本接收数据，执行数据库查询，并将结果以 JSON 格式返回。 同时，务必注意 SQL 注入的风险，并采取相应的安全措施。