搜索Html表和显示没有刷新的结果 [英] Search Html Table and Display Results Without Refresh
本文介绍了搜索Html表和显示没有刷新的结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在表格上方有一组字段，这些字段用于搜索我的表格。以下是一段代码片段：
I have a group of fields above my table and these fields are used to search my table. Here's a code snippet:
<?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>
如何在我的表中搜索数据并显示结果（在同一个表中），而不刷新页？如你所见，我有一个日志下载按钮，也许当我点击它，结果将显示。
How do I search data in my table and display the results (inside the same table) without refreshing the page? As you can see, I have a "Log Download" button, maybe when I click that, the results will then show.
编辑：
有点像实现数据表（ https://www.datatables.net/ ），但在我的例子中，我有多个表单
Somewhat like the implementation of dataTables (https://www.datatables.net/) but in my case, I have multiple form fields to use in searching.
推荐答案
您可以这样做
$("#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 添加其他属性也
This is only for deviceName type you can add other properties also
这篇关于搜索Html表和显示没有刷新的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
