jQuery实时过滤,匹配时如何返回整行
jQuery live filtering, how do I return entire rows when matched?
我正在使用jQuery实时过滤器插件对整个表进行即时搜索。这个插件工作得很好,但它按单元格过滤,我想搜索整行(tr)匹配,而不仅仅是一个单元格。
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td><a href="/alarm/load?id=60" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=60" class="btn btn-danger" role="button">Delete</a></td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td><a href="/alarm/load?id=61" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=61" class="btn btn-danger" role="button">Delete</a></td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
此代码的结果是部分行信息。如果我写a
,它会返回所有匹配的单元格,但不会像我预期的那样返回整行。如果可能的话,我只想按name
列搜索。
根据这个插件,您可以为匹配的元素传递过滤器功能。所以试试下面的代码。
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
或者,如果您可以为包含报警名称的单元格指定任何类名,效果会更好。在这种情况下,你的html看起来像:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td><a href="/alarm/load?id=60" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=60" class="btn btn-danger" role="button">Delete</a></td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td><a href="/alarm/load?id=61" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=61" class="btn btn-danger" role="button">Delete</a></td>
</tr>
</tbody>
</table>
并使用以下脚本:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
相关文章:
- 从承诺返回不返回函数会导致警告
- 挂起的回调:在每次回调返回之前返回响应
- 为什么函数 f 中的返回值返回显示函数而不是 x 值
- 函数的返回值返回错误的值
- 返回浏览器-返回链接位置
- 模块中的返回值返回Null
- 返回不返回对象
- 如何防止用户右键单击返回按钮返回
- 在javaScript中返回这个|返回false
- 为什么console.log("text")只返回"text"返回单行
- 在闭包内返回函数返回undefined
- 我可以在if语句中返回后返回吗?Javascript
- 返回逻辑运算符(&&)返回,||返回)
- Javascript返回函数返回undefined
- 想要的文档.打开可创建新的历史元素,返回可返回到原始页面
- 浏览器返回按钮返回遵循自定义url列表
- 在我通过返回键返回页面后,索引没有重置为0
- 一个函数,它接受一个参数并返回一个返回该参数的函数
- 在我自己的Angular服务中,如何将返回值返回给调用该服务的控制器
- Javascript将数组返回到返回函数数组的索引[0]