自定义下拉过滤器和引导表分页刷新答案

【问题标题】：custom dropdown filter and bootstrap-table pagination refresh自定义下拉过滤器和引导表分页刷新
【发布时间】：2015-11-10 11:08:23
【问题描述】：

我在引导表中添加了自定义下拉过滤器。

问题；当我从这个过滤器中选择选项并且记录数量发生变化时，我仍然可以看到相同的未更改的分页数字。

过滤器通过data-toolbar="#key_filter"添加到引导表

问题是否有任何简单的方法可以将此自定义下拉列表与分页链接以获得相同的结果，例如与 bootstrap-table 捆绑在一起的搜索。

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();
        });
    });

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-table

【解决方案1】：

您需要在您的情况下使用 bootstrapTable 的load 方法：

$table.bootstrapTable('load', filterData);

最好的方法是你可以使用requestParams来过滤你的请求参数，例如：http://your-url?type=success，然后返回你想要的数据。

给你写个 jsFiddle：http://jsfiddle.net/wenyi/e3nk137y/3567/

【讨论】：

谢谢。现在很好。