使用 jQuery 和 DataTables 传递表单数据进行动态数据过滤-php教程-PHP中文网

使用 jQuery 和 DataTables 传递表单数据进行动态数据过滤

DDD

发布： 2025-10-13 11:01:02

原创

895人浏览过

使用 jquery 和 datatables 传递表单数据进行动态数据过滤

本文旨在解决如何通过 HTML zuojiankuohaophpcnselect> 表单向 DataTables 传递数据，从而实现动态数据过滤。我们将介绍如何利用 jQuery 监听表单提交事件，并将表单数据作为 AJAX 请求的一部分发送到服务器端，最终更新 DataTables 的显示内容。通过本文，你将掌握 DataTables 动态数据加载和过滤的关键技术。

前端实现：jQuery 与 DataTables 的集成

首先，我们需要在 HTML 中创建一个包含 <select> 元素的表单，并使用 DataTables 初始化一个表格。关键在于如何将表单的值传递给 DataTables 的 AJAX 请求，并在服务器端利用这些值进行数据过滤。

HTML 结构 (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 代码：

以下是使用 jQuery 监听表单提交事件，并重新加载 DataTables 的 AJAX 数据的关键代码。

表单大师AI

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

查看详情

$(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) { // 使用 ID 选择器
    e.preventDefault();
    table.ajax.reload();
  });
});

登录后复制

代码解释:

var table = $('#place-table').DataTable({...}): 初始化 DataTables，并将 DataTables 对象赋值给变量 table，以便后续操作。
"data": function(d) {...}: 在 AJAX 请求中，定义 data 函数，用于动态构建要发送到服务器的数据。$('#frm').serializeArray() 将表单数据序列化为数组，然后循环遍历该数组，将每个字段的值添加到 DataTables 的 AJAX 请求参数中。 注意这里需要使用 #frm 通过ID选择器来选择表单
$("#frm").submit(function(e) {...}): 监听表单的提交事件。e.preventDefault() 阻止表单的默认提交行为，table.ajax.reload() 重新加载 DataTables 的 AJAX 数据，从而更新表格内容。 注意这里需要使用 #frm 通过ID选择器来选择表单

后端实现：PHP 数据过滤 (json.php)

在服务器端，我们需要接收来自 DataTables 的 AJAX 请求，并使用表单数据作为 WHERE 子句来查询数据库。

<?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 = "SELECT * FROM placestable WHERE place_name = '$selectedplace'"; // 使用预处理语句防止SQL注入

  $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();
?>

登录后复制

代码解释:

$selectedplace = $_POST['selectplace'];: 获取通过 POST 请求发送的 selectplace 的值。
*`$sql = "SELECT FROM placestable WHERE place_name = '$selectedplace'";**: 构造 SQL 查询语句，使用$selectedplace的值作为WHERE` 子句的条件。重要提示：为了防止 SQL 注入攻击，应该使用预处理语句来构建 SQL 查询。 例如：
```
$stmt = $conn->prepare("SELECT * FROM placestable WHERE place_name = ?");
$stmt->bind_param("s", $selectedplace);
$stmt->execute();
$result = $stmt->get_result();
```
登录后复制
echo json_encode($data);: 将查询结果编码为 JSON 格式，并将其发送回客户端。