web-dev-qa-db-ja.com

検索とフィルターを使用するためのブートストラップテーブル

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',
                };
            }
        });
    });
twitter-bootstraptwitter-bootstrap-3bootstrap-table
6
Spirit
$(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>

例 ここ

11
atiruz

私はそれを修正する方法を見つけました。ファイル/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);

そして今、フィルターと検索の両方が機能しています。しかし、検索を使用してからフィルター処理するか、または逆にすると、依然としてバグがあります。

0
apelsinka223

この問題の解決策が見つかりました。検索されたデータオブジェクトがフィルタープラグインによってリセットされていました。 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に変更するだけです。とても簡単！

0
brettex

これが、bootstrap-tableで動的フィルターを使用してサーバーに送信するajaxに配置するための私のソリューションです。 「データ」は1つのフィールドにのみ配置されることに注意してください。

例： ここ

<!-- 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>
0
Eder Sotto