Wie bootstrap-Tabelle zu verwenden, zu suchen und zu filtern?

Ich bin mit bootstrap um eine Tabelle zu zeichnen, und ich brauche beide such-und filter-Funktion. Aber die Suche-Funktion nicht arbeiten kann, nachdem ich filter hinzufügen-Funktion. wenn ich die Zeile löschen "", die Suchfunktion funktioniert, aber filter-Funktion verschwinden, wie sich der Einsatz sowohl für die Funktion? Hier ist der code:

<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',
                };
            }
        });
    });

InformationsquelleAutor Spirit | 2015-01-08

  1. 0

    ich gefunden wie es zu lösen ist. In der Datei /bootstrap-table/extensions/filter/bootstrap-table-filter.min.js ist dieser code (dekomprimiert):

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

    Änderte ich es auf diesem (umbenannt definierte Funktion initSearch zu 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);

    Und jetzt beide filter und die Suche arbeiten. Aber es hat noch einen Fehler, wenn Sie verwenden Sie die Suche, und dann filtern, oder genau Umgekehrt.

    InformationsquelleAutor apelsinka223

  2. 0

    hier ist meine Lösung zu verwenden, die dinamyc Filter in der bootstrap-Tabelle und platzieren Sie es in der ajax-Absenden an den server. Beachten Sie, dass die "Daten" ist in nur einem Feld.

    Beispiel: Hier

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

    InformationsquelleAutor Eder Sotto

  3. 0

    Fand ich eine Lösung für dieses Problem, die Gesuchten Daten Objektes zurücksetzen, indem Sie die filter-plugin. Verfolgt es bis auf die bootstrap-table-filter.js Datei:

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

    Sich die gesuchten Daten in diesen.Daten, aber der filter wurde mit dieser.Optionen.Daten, die das gesamte un-gefilterte Tabelle Daten-Objekt.

    Ändere es einfach so, dass die filter-Suche-Objekt verwendet die Suche verarbeitet Daten-Objekt; so ändern Sie einfach den parameter aus.Optionen.Daten zu dieser.Daten. Einfach genug!

    404-Fehler im link
    Aktualisiert, link zur Datei: github.com/wenzhixin/bootstrap-table/blob/develop/src/...

    InformationsquelleAutor brettex

Schreibe einen Kommentar