Come bootstrap-table usare la ricerca e il filtro?

Question

Sto usando il bootstrap per disegnare un tavolo, e ho bisogno sia della funzione di ricerca che di filtro. Ma la funzione di ricerca non può funzionare dopo aver aggiunto la funzione filtro. quando elimino la riga "", la funzione di ricerca funziona, ma la funzione filtro scompare, come utilizzare entrambe le funzioni? Ecco il codice:

<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

ho trovato come risolverlo. Nel file di /bootstrap-table/extensions/filter/bootstrap-table-filter.min.js è questo codice (decompresso):

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

ho cambiato su questo (rinominato funzione definita initSearch a 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); 

E ora funzionano sia il filtro che la ricerca. Ma ha ancora un bug, se usi search e quindi filtri o contrariwise.

Answer 2

Ho trovato una soluzione a questo problema, l'oggetto di dati cercato veniva reimpostato dal plug-in del filtro. Rintracciato giù al bootstrap-table-filter.js file:

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

I dati cercata è memorizzato in this.data, ma il filtro stava usando this.options.data, che è l'intero, oggetto dati della tabella non filtrata.

Basta cambiarlo in modo che l'oggetto di ricerca filtro utilizzi l'oggetto dati elaborato di ricerca; quindi basta cambiare il parametro da this.options.data a this.data. Abbastanza facile!

Answer 3

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

Esempio Da Here

Answer 4

qui la mia soluzione di utilizzare i filtri Dinamyc in bootstrap-tavolo e posizionarlo nella ajax inviare al server. Si noti che il "dato" è posto in un solo campo.

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