本文旨在解决如何通过 HTML
前端实现：jQuery 与 DataTables 的集成
首先，我们需要在 HTML 中创建一个包含
HTML 结构 (index.php):
| PLACE # | PLACE NAME | TOTAL VISITORS |
|---|---|---|
| PLACE # | PLACE NAME | TOTAL VISITORS |
jQuery 代码：
以下是使用 jQuery 监听表单提交事件，并重新加载 DataTables 的 AJAX 数据的关键代码。
Psky企业网站系统1.1.2
下载
Psky企业网站是基于PHP+MYSQL开发的一款企业官网宣传网站，支持PC、wap浏览。 主要功能包括导航管理、轮播新闻、单位动态、通知通报、单位简介、后台管理等。运行环境下载安装PHPStudy（小皮）即可。系统采用PHP语言（版本：7.3.4nts）和MYSQL（版本：5.7.26）数据库进行开发，安装PHPStudy（小皮）集成环境进行测试通过。安装步骤：1、导入SQL文件到PHPmyad
$(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 子句来查询数据库。
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 格式，并将其发送回客户端。
注意事项和总结
- 安全性： 始终使用预处理语句来防止 SQL 注入攻击，特别是当使用用户提供的输入来构建 SQL 查询时。
- 错误处理： 在服务器端添加错误处理机制，以便在发生错误时能够正确地处理并返回错误信息给客户端。
- 性能优化： 如果数据量很大，可以考虑使用服务器端分页来提高性能。
- 表单验证： 在客户端和服务器端都进行表单验证，以确保数据的有效性和完整性。
- ID选择器: 确保在jQuery选择表单的时候使用ID选择器 #frm，这可以更准确地选择到目标表单元素。
通过本文，你学习了如何将 HTML 表单与 DataTables 集成，从而实现动态数据过滤。 掌握这些技术将使你能够构建更加灵活和交互性更强的 Web 应用程序。
