自定义下拉筛选器和引导程序表分页刷新
custom dropdown filter and bootstrap-table pagination refresh
我在引导表中添加了自定义下拉过滤器。
问题当我从这个过滤器中选择选项,并且记录数量正在变化时,我仍然可以看到相同的未更改的页码数字。
过滤器已通过data-toolbar="#key_filter"
添加到引导程序表中
问题有没有什么简单的方法可以将这个自定义下拉列表与分页链接起来,以获得与引导表捆绑在一起的搜索相同的结果。
HTML:
<div id="key_filter">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">Filter records by status <span
class="caret"></span>
</button>
<ul class="dropdown-menu alertFilter" aria-labelledby="dropdownMenu1">
<li id="keySuccess"><a href="#"><strong>Success</strong></a></li>
<li id="keyDanger"><a href="#"><strong>Danger</strong></a></li>
<li id="keyWarning"><a href="#"><strong>Warning</strong></a></li>
<li id="keyAll"><a href="#"><strong>Display All</strong></a></li>
</ul>
</div>
<table id="tbl" data-toggle="table" data-show-columns="true" data-search="true" data-pagination="true"
data-page-list="[10, 20, 50, 100, All]" data-classes="table table-hover"
data-toolbar="#key_filter" data-show-pagination-switch="true">
<thead>
<tr>
<th data-sortable="true">Name</th>
<th data-sortable="true">Phone of...</th>
<th data-sortable="true">Reason</th>
</tr>
</thead>
<tbody>
<tr class="warning" data-ss-key="warning">
<td>name1</td>
<td>phone1</td>
<td>why warning ?</td>
</tr>
<tr class="success" data-ss-key="success">
<td>name1</td>
<td>phone1</td>
<td>why warning ?</td>
</tr>
<tr class="danger" data-ss-key="danger">
<td>name1</td>
<td>phone1</td>
<td>why warning ?</td>
</tr>
</tbody>
JS:
$(function () {
$('#keySuccess').click(function () {
$("tr[data-ss-key]").hide();
superText = $('#keySuccess').text();
$('#dropdownMenu1').html(superText+' <span class="caret"></span>');
$('#dropdownMenu1').css('background','#03a678');
$("tr[data-ss-key=success]").show();
});
$('#keyDanger').click(function () {
$("tr[data-ss-key]").hide();
superText = $('#keyDanger').text();
$('#dropdownMenu1').html(superText+' <span class="caret"></span>');
$('#dropdownMenu1').css('background','#ef4836');
$("tr[data-ss-key=danger]").show();
});
$('#keyWarning').click(function () {
$("tr[data-ss-key]").hide();
superText = $('#keyWarning').text();
$('#dropdownMenu1').html(superText+' <span class="caret"></span>');
$('#dropdownMenu1').css('background','#f39c12');
$("tr[data-ss-key=warning]").show();
});
$('#keyAll').click(function () {
superText = $('#keyAll').text();
$('#dropdownMenu1').html('Filter supervisions by status'+' <span class="caret"></span>');
$('#dropdownMenu1').css('background','none');
$("tr[data-ss-key]").show();
});
});
在您的情况下,您需要使用bootstrapTable的load
方法:
$table.bootstrapTable('load', filterData);
最好的方法是,您可以使用requestParams
来过滤您的请求参数,例如:http://your-url?type=success
,并返回您想要的数据。
给你写一个jsFiddle:http://jsfiddle.net/wenyi/e3nk137y/3567/
相关文章:
- Javascript数组表分页
- 如何使用javascript检测数据表分页的其他页面中的复选框
- JSF数据表分页中的当前页码
- 数据表分页只能计算第一页的复选框
- 引导表分页和搜索不起作用
- 删除和恢复数据表分页点击功能
- 智能表分页链接不工作
- 自定义下拉筛选器和引导程序表分页刷新
- 使用Jquery对大数据进行表分页
- 与其他解决方案相比,内置的ng表分页在性能上存在问题
- 为什么引导动态表分页不能工作
- 表分页,显示链接
- 额外的jquery不能在数据表分页中工作
- 主干js -表分页更新所有访问的视图
- 引导表分页
- ng表分页不工作
- 需要关于设计表分页的建议
- jquery和html中的表分页
- 素数单选数据表分页 + 行索引变量
- 静态网站中的表分页问题