twitter-bootstrap - bootstrap-table 如何使用搜索和过滤？

Question

我正在使用引导程序绘制表格，并且我需要搜索和过滤功能。但是添加过滤功能后搜索功能无法使用。当我删除“”行时，搜索功能起作用，但过滤功能消失，如何使用这两个功能？这是代码：

<div id="filter-bar"></div>
<table id="tbl" data-height="299" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-select-item-name="toolbar1">
    <thead>
    <tr>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-align="" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>
  <link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/bootstrap-table.css">
  <link rel="stylesheet" href="/static/libs/jasny-bootstrap/css/jasny-bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.css">
  <script type="text/javascript" src="/static/libs/jquery2/jquery-2.0.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/libs/bootstrap-table-master/src/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter1.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bs-table.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/bootstrap-table-export.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/tableExport.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/jquery.base64.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tbl").bootstrapTable({
            url: "tbl_data.json",
            method: "get",
            showFilter: true,
            search: true,
            queryParams: function (p) {
                return{
                    device: 'iphone',
                    mdate: '2014-12-13',
                };
            }
        });
    });

Answer 1

$(document).ready(function () {

    (function ($) {

        $('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();

        })

    }(jQuery));

});

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filter</span>

    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

示例从这里

Answer 2

我找到了解决方法。在文件 /bootstrap-table/extensions/filter/bootstrap-table-filter.min.js 中是这段代码（解压缩）：

    /*
     * bootstrap-table - v1.5.0 - 2014-12-12
     * https://github.com/wenzhixin/bootstrap-table
     * Copyright (c) 2014 zhixin wen
     * Licensed MIT License
     */
    ! function(a) {
        "use strict";
        a.extend(a.fn.bootstrapTable.defaults, {
            showFilter: !1
        });
        var b = a.fn.bootstrapTable.Constructor,
            c = b.prototype.init,
            d = b.prototype.initSearch;
        b.prototype.init = function() {
            c.apply(this, Array.prototype.slice.apply(arguments));
            var b = this;
            this.$el.on("load-success.bs.table", function() {
                b.options.showFilter && a(b.options.toolbar).bootstrapTableFilter({
                    connectTo: b.$el
                })
            })
        }, b.prototype.initSearch = function() {
            d.apply(this, Array.prototype.slice.apply(arguments)), "server" !== this.options.sidePagination && "function" == typeof this.searchCallback && (this.data = a.grep(this.options.data, this.searchCallback))
        }, b.prototype.getData = function() {
            return this.searchText || this.searchCallback ? this.data : this.options.data
        }, b.prototype.getColumns = function() {
            return this.options.columns
        }, b.prototype.registerSearchCallback = function(a) {
            this.searchCallback = a
        }, b.prototype.updateSearch = function() {
            this.options.pageNumber = 1, this.initSearch(), this.updatePagination()
        }, b.prototype.getServerUrl = function() {
            return "server" === this.options.sidePagination ? this.options.url : !1
        }, a.fn.bootstrapTable.methods.push("getColumns", "registerSearchCallback", "updateSearch", "getServerUrl")
    }(jQuery);

我对此进行了更改（将定义的函数 initSearch 重命名为 initSearch1）：

   /*
     * bootstrap-table - v1.5.0 - 2014-12-12
     * https://github.com/wenzhixin/bootstrap-table
     * Copyright (c) 2014 zhixin wen
     * Licensed MIT License
     */
    ! function(a) {
        "use strict";
        a.extend(a.fn.bootstrapTable.defaults, {
            showFilter: !1
        });
        var b = a.fn.bootstrapTable.Constructor,
            c = b.prototype.init,
            d = b.prototype.initSearch;
        b.prototype.init = function() {
            c.apply(this, Array.prototype.slice.apply(arguments));
            var b = this;
            this.$el.on("load-success.bs.table", function() {
                b.options.showFilter && a(b.options.toolbar).bootstrapTableFilter({
                    connectTo: b.$el
                })
            })
        }, b.prototype.initSearch1 = function() {
            d.apply(this, Array.prototype.slice.apply(arguments)), "server" !== this.options.sidePagination && "function" == typeof this.searchCallback && (this.data = a.grep(this.options.data, this.searchCallback))
        }, b.prototype.getData = function() {
            return this.searchText || this.searchCallback ? this.data : this.options.data
        }, b.prototype.getColumns = function() {
            return this.options.columns
        }, b.prototype.registerSearchCallback = function(a) {
            this.searchCallback = a
        }, b.prototype.updateSearch = function() {
            this.options.pageNumber = 1, this.initSearch1(), this.updatePagination()
        }, b.prototype.getServerUrl = function() {
            return "server" === this.options.sidePagination ? this.options.url : !1
        }, a.fn.bootstrapTable.methods.push("getColumns", "registerSearchCallback", "updateSearch", "getServerUrl")
    }(jQuery);

现在过滤器和搜索器都在工作。但它仍然有一个错误，如果您使用搜索然后过滤或相反。

Answer 3

我找到了解决这个问题的方法，过滤器插件正在重置搜索的数据对象。追踪到bootstrap-table-filter.js 文件：

//this.data = $.grep(this.options.data, this.searchCallback);
this.data = $.grep(this.data, this.searchCallback);

搜索到的数据存储在 this.data 中，但过滤器使用的是 this.options.data，它是整个未过滤的表数据对象。

只需更改它，以便过滤器搜索对象使用搜索处理的数据对象；所以只需将参数从 this.options.data 更改为 this.data。够简单！

Answer 4

这是我在 bootstrap-table 中使用动态过滤器并将其放在 ajax 提交给服务器的解决方案。请注意，“数据”仅放在一个字段中。

示例：这里

<!-- Bootstrap Table Filter Extension Javascript-->
<script src="ex_bootstrap-table-filter.js"></script>
<script src="bootstrap-table-filter.js"></script>
<script src="bs-table.js"></script>