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

Question

我正在使用bootstrap来绘制一个表，我需要搜索和过滤功能。但是我添加了过滤功能后，搜索功能就不能工作了。当我删除行"“时，搜索函数起作用了，但是过滤函数消失了，如何使用这两个函数呢？代码如下：

<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>

​

来自Here的示例

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

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

Answer 3

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

//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。很简单！