datatables - 数据表 - 隐藏数据直到搜索
问题描述
我希望我的页面最初只加载一个搜索框,然后当有人开始搜索时,即出现表格。
我的示例表如下:
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="none">Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test 1</td>
<td>Test test test</td>
<td>ABC</td>
</tr>
<tr>
<td>Test 2</td>
<td>Test test test</td>
<td>DEF</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test test test</td>
<td>GHI</td>
</tr>
</tbody>
</table>
解决方案
是的,它可以使用 ajax 调用来完成,我想你使用 php。例如,您可以在每次按下任何字符时生成一个表格,用结果填充表格或使用按钮搜索您在输入字段中键入的关键字。ajax 和 php 示例:
var search_string = $('#id_of_the_input_box').val();
$.ajax({
url:"php_file.php",
method:"POST",
data:{action:action},
dataType:"json",
success:function(data){
console.log(data);
}
和使用 PDO 的 php 代码
$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
$result = '
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
});
});
<table id="example" class="display" style="width:100%">
YOUR TABLE ROWS HERE
</table>
';
// foreach loop to populate the table example
foreach ($query_results as $row) {
$result.= '
<tr>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
'
} else {
echo "No results";
}
}
// echo the generated table as ajax response
echo $result;
希望你已经通过这个例子抓住了这个想法。
推荐阅读
- c++ - 使用 std::pair 优化返回值
- image - 工作箱和响应式图像
- angularjs - 找不到我的一个角度控制器
- javascript - 基于活动的jQuery切换侧边栏子菜单
- javascript - 在 Node.js 中的子进程生成中面临停止流的困难?
- php - How to upload files using PHP - ODBC in Oracle?
- python - i = i + n 真的和 i += n 一样吗?
- gpu - 从 APU 强制显示并为 OpenCL 配备独立 GPU?
- php - 如何根据位置替换子字符串?
- ansible - Ansible——变量分层管理的方法