Twitter bootstrap 引导表如何使用搜索和筛选？

我正在使用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',
                };
            }
        });
    });

项目ID
项目名称
项目价格
$（文档）.ready（函数（）{
$（“待定”）.bootstrapTable({
url:“tbl_data.json”，
方法：“获取”，
showFilter：是的，
搜索：对，
查询参数：函数（p）{
返回{
设备：“iphone”，
日期：“2014-12-13”，
};
}
});
});

我找到了修复它的方法。在/bootstrap-table/extensions/filter/bootstrap-table-filter.min.js文件中是以下代码（已解压缩）：

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

---

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

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

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

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

$（文档）.ready（函数（）{
（函数（$）{
$（“#过滤器”）.keyup（函数（）{
var rex=new RegExp（$（this.val（），'i'）；
$（'.searchable tr'）.hide（）；
$（'.searchable tr'）.filter（函数（）{
返回rex.test（$（this.text（））；
}).show（）；
})
}（jQuery））；
});

滤器
代码
名称
违约
地位
欧元
欧元
活跃的
英镑
英镑
活跃的
凝胶
格鲁吉亚拉里
活跃的
美元
美元
活跃的
我的解决方案是在引导表中使用动态过滤器，并将其放置在ajax提交到服务器中。请注意，“数据”仅放在一个字段中

例如：


如果有分页怎么办？你还想在搜索后找到你要搜索的名字在表格下一页的位置吗？我喜欢自定义输入过滤器的这种方式，但它不适用于分页。它只搜索可见页面。链接中的404错误更新文件链接：
    /*
     * 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);

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

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

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