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

Posted 2023-05-08

【中文标题】bootstrap-table 如何使用搜索和过滤？

【英文标题】：How bootstrap-table to use search and filter?

【发布时间】：2015-03-06 11:02:03

【问题描述】：

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

<div id="filter-bar"></div>
<table id="tbl" data- 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',
                ;
            
        );
    );

【参考方案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的示例

【讨论】：

如果有分页怎么办？并且您仍然希望在您正在搜索的名称在表的下一页中的搜索之后获得成功？

我喜欢这种带有自定义输入过滤器的方式，但它不适用于分页。它只搜索可见页面。

【参考方案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);

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

【参考方案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。很简单！

【讨论】：

404 链接错误

更新了文件链接：github.com/wenzhixin/bootstrap-table/blob/develop/src/…

【参考方案4】：

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

示例：Here

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