php - 使用 PHP 在数据表中进行高级搜索
问题描述
我使用以下代码创建了一个数据表:-
main.php - 它包含调用数据表的脚本和从 sql 数据库中获取数据的 php 脚本
<!DOCTYPE html>
<html>
<head>
<title>Data Table | Server Side | Basic | Zero Level</title>
</head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th><th>Gender</th><th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th><th>Gender</th><th>Age</th>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"bProcessing": true,
"sAjaxSource": "dtServerSideBasicScript.php",
"aoColumns": [{
mData: 'name','gender','age'
}]
} );
} );
</script>
</html>
和 dtServerSideBasicScript.php - 这是从 sql server 获取数据的脚本:-
<?php
header('Content-Type: application/json');
$con = mysqli_connect("localhost","root","","work");
$sql = "SELECT name,gender,age from test ";
$r = mysqli_query($con,$sql);
$result = array();
while($row = mysqli_fetch_array($r)){
array_push($result,array(
"name"=>$row['name'],"gender"=>$row['gender'],"age"=>$row['age']
));
}
echo json_encode(array('data'=>$result));?>
现在,我必须在数据表上方应用高级过滤器部分,它可以是一个包含以下字段的表单 - 名称输入、年龄范围输入和性别选择输入字段。提交此表格后,相关搜索结果应显示在数据表中。
解决方案
让我给你举个例子,按名称搜索你也可以对其他搜索字段做同样的事情。
在您的 html 中为搜索字段添加以下输入标记
<input type="text" name="user_name" id="user_name" />
现在按照以下更改您的脚本,
<script type="text/javascript">
$(document).ready(function() {
var table=$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"bProcessing": true,
"ajax": {
url: "dtServerSideBasicScript.php",
data: function (d) {
d.user_name = function () {
return $("#user_name").val();
};
},
},
"aoColumns": [{
mData: 'name','gender','age'
}]
} );
$('#user_name').keyup(function () {
table.draw();
});
});
</script>
在服务器端,您将在 $_GET 中获得 user_name 参数,例如 $_GET['user_name']。然后你可以在你的 sql 查询中使用这个值。
同样的方式你可以实现年龄范围和性别选择。
推荐阅读
- c++ - XML 到 XML XSLT 的转换。VBScript 中的 MSXML
- css - 动画后div回到隐藏状态
- python - Python Boto3 PutBucketReplication 操作:您提供的 XML 格式不正确或未针对我们发布的架构进行验证
- mysql - 为什么 phpmyadmin 搜索说没有唯一的列?
- angular - 如何在值更改检查之前完成角度可观察?
- security - 开发人员留下后门的正当理由是什么?他们可以避免保留一个吗?
- ios - 在 Swift 5 中使用 Graph API 显示用户的 Facebook 图片
- flutter - Flutter 错误:无法找到 gradlew 脚本
- flutter - 如何在 Flutter 中添加两个不同持续时间的不同动画?
- google-sheets - 聚合来自多个谷歌工作表的数据并查询它们