一个简单的实现bootstrap表格搜索功能的方式,代码如下:
html部分
<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results">
<thead>
<tr>
<th>#</th>
<th class="col-md-5 col-xs-5">Name / Surname</th>
<th class="col-md-4 col-xs-4">Job</th>
<th class="col-md-3 col-xs-3">City</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Vatanay Özbeyli</td>
<td>UI & UX</td>
<td>Istanbul</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Burak Özkan</td>
<td>Software Developer</td>
<td>Istanbul</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Egemen Özbeyli</td>
<td>Purchasing</td>
<td>Kocaeli</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Engin Kızıl</td>
<td>Sales</td>
<td>Bozuyük</td>
</tr>
</tbody>
</table>
js部分
$(document).ready(function() {
$(".search").keyup(function () {
var searchTerm = $(".search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {'containsi': function(elem, i, match, array){
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','true');
});
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if(jobCount == '0') {$('.no-result').show();}
else {$('.no-result').hide();}
});
});
源码下载地址:https://github.com/aitlp/bootstrap-table-search;
最新评论
不错挺好用的,东至梅城何红涛林场的 何红涛2个月前 (10-18)回复
识别码不对
呵呵
我的是ipv4网络,如何使用直播源啊!