我的桌子上方有一组字段，这些字段用于搜索我的表格。这是一个代码段：
<?php $form = ActiveForm::begin(['id' => 'devicemgmt-form']); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<div class="row">
<div class="col-sm-5">Device Name</div>
<div class="col-sm-7">
<input type="text" name="device-name" class="form-control input-sm">
</div>
</div>
<br>
<div class="row">
<div class="col-sm-5">Broadcasted Program</div>
<div class="col-sm-7">
<select name="country" class="form-control input-sm">
<option selected disabled>Please Select</option>
<?php
foreach($devices as $key => $value):
echo '<option value="'.$key.'">'.$value['Broadcasted Program'].'</option>';
endforeach;
?>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-5">Store</div>
<div class="col-sm-7">
<select class="form-control input-sm">
<option selected disabled>Please Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="row">
<div class="col-sm-5">Model name</div>
<div class="col-sm-7">
<select name="country" class="form-control input-sm">
<option selected disabled>Please Select</option>
<?php
foreach($devices as $key => $value):
echo '<option value="'.$key.'">'.$value['Device Model'].'</option>';
endforeach;
?>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-5">Status</div>
<div class="col-sm-7">
<select class="form-control input-sm">
<option selected disabled>Please Select</option>
<option>Started</option>
<option>Pending</option>
<option>Complete</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-5">Log Output Date</div>
<div class="col-sm-7">
<input type="text" name="device-name" class="form-control input-sm">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row" style="height: 98px;"></div>
<div class="row">
<button href="#" class="btn download-btn" id="downloadBtn">Log Download</button>
</div>
</div>
</div>
</div>
<?php ActiveForm::end(); ?>
<div class="container-fluid">
<table id="device-list_table" class="table table-striped table-bordered dataTable display">
<thead>
<tr>
<th class="text-center"><input type="checkbox" id="selectAll"></th>
<th class="text-center">Device Name</th>
<th class="text-center">Device Model</th>
<th class="text-center">Broadcasted Program</th>
<th class="text-center" colspan="2">Device Status</th>
<th class="text-center">Last Communication Date and Time</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<?php foreach($devices as $key => $value) { ?>
<tr>
<td class="text-center"><input type="checkbox" name="device-checkbox" value="<?= $value['Device Name'] ?>" id="<?php echo 'boxId'.$key ?>"></td>
<td class="text-center"><?= $value['Device Name']; ?></td>
<td class="text-center"><?= $value['Device Model']; ?></td>
<td class="text-center"><?= $value['Broadcasted Program']; ?></td>
<td class="text-center">
<?php
if ($value['Device Status'] == "Start") {
echo "<font color='yellow'>⚫</font>";
} elseif ($value['Device Status'] == "Pending") {
echo "<font color='red'>⚫</font>";
} elseif ($value['Device Status'] == "Complete") {
echo "<font color='green'>⚫</font>";
}
?>
</td>
<td class="text-center"><?= $value['Device Status']; ?></td>
<td class="text-center"><?= $value['Last Communication Date and Time']; ?></td>
<td class="text-center">
<ul class="list-inline">
<li>
<button href="#" class="btn">
Display Log
</button>
</li>
<li>
<button href="#" class="btn">
Edit
</button>
</li>
</ul>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
如何在不刷新页面的情况下搜索表格中的数据并显示结果（在同一个表格内）？正如你所看到的，我有一个＆＃34;日志下载＆＃34;按钮，也许当我点击它时，结果将显示。
编辑： 有点像dataTables（https://www.datatables.net/）的实现，但在我的情况下，我有多个表单字段用于搜索。
答案 0 :(得分：4)
你可以这样做
$("#deviceName").keyup(function(){
var filter = $(this).val();
$("#device-list_table tr td").each(function(){
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
这仅适用于deviceName类型，您也可以添加其他属性
答案 1 :(得分：1)
这是一个简单的Jquery插件
http://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Html-Table-Live-Search.html
在网页中包含jQuery库和jQuery Html表搜索插件。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="html-table-search.js"></script>
在现有的Html表上调用插件。
$(document).ready(function(){
$('table.search-table').tableSearch();
});
答案 2 :(得分：1)
我不太确定你在问什么，但是如果我理解正确，你有一个包含可搜索信息的<table>元素，你希望这个表更新为只包含用户之后的搜索结果使用搜索功能？
在这种情况下，您可以通过以下方式通过AJAX请求执行此操作。创建一个.php文件，根据搜索功能的输入生成表的内容（我们称之为generateTable.php），通过$ _GET变量发送给它。 generateTable.php是这样的：
$result = search($_GET['device-name'], $_GET['country'], $_GET['store']...);
echo '<tr><td>' . $result[0] . '</td><td>' . $result[1] . '</td><td>' . $result[2] . '</td><td>'...'</tr>'
其中search（）是执行搜索的函数，返回包含结果的数组。
单击搜索按钮时调用JS函数，构建URL到generateTable.php，并包含$ _GET值（/generateTable.php?device-name=foo&country=usa&store=3...）。您可以使用JQuery的.val（）函数从字段中获取值，例如var deviceName = $('#device-name').val();。这需要您将id='device-name'添加到名为＆＃34; device-name＆＃34;的输入字段中。
var deviceName = $('#device-name').val();
var country = $('#country').val();
var store = $('#store').val();
...
var generateTableUrl = "generateTable.php?device-name=" + deviceName + "&country=" + country + "&store=" + store...
使用JQuery AJAX，您可以使用以下JS代码加载generateTable.php的输出：
$('#device-list_table').load(generateTableUrl);
整个脚本变为
function getSearchResults() {
var deviceName = $('#device-name').val();
var country = $('#country').val();
var store = $('#store').val();
...
var generateTableUrl = "generateTable.php?device-name=" + deviceName + "&country=" + country + "&store=" + store...
$('#device-list_table').load(generateTableUrl);
}
要开始整个过程，请将onClick='getSearchResults();'添加到搜索按钮，即按传统形式的提交按钮。请注意，此过程不会使用传统意义上的表单，因为表单不会调用＆quot; generateTable.php＆＃39;直接地，它只是用作获取JS函数的输入的地方，该函数加载了“生成表”.php＆＃39;。
我必须为我必须做的代码简化道歉;我目前无法测试我的代码，因此这里所写的内容更像是一个工作示例的概要。
答案 3 :(得分：0)