W jaki sposób tablica startowa ma korzystać z wyszukiwania i filtrowania?

Question

Używam bootstrap do narysowania tabeli, i potrzebuję zarówno funkcji wyszukiwania, jak i filtrowania. Ale funkcja wyszukiwania nie może działać po dodaniu funkcji filtra. kiedy usuwam wiersz "", funkcja wyszukiwania działa, ale funkcja filtru znika, jak korzystać zarówno z funkcji? Oto kod:

<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

znalazłem sposób, aby to naprawić. W pliku /bootstrap-table/extensions/filter/bootstrap-table-filter.min.js jest ten kod (dekompresji):

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

zmieniłem go na tej funkcji (przemianowany zdefiniowane initSearch do 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); 

A teraz działają zarówno filtr, jak i wyszukiwanie. Ale nadal ma błąd, jeśli używasz wyszukiwania, a następnie filtrujesz lub odwrotnie.

Answer 2

Znalazłem rozwiązanie tego problemu, obiekt Wyszukiwany obiekt został zresetowany przez wtyczkę filtra. Śledzone ją w dół do bootstrap-table-filter.js file:

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

wyszukane dane są przechowywane w this.data, ale filtr był przy this.options.data, który jest cały, un-filtrowany obiekt danych tabeli.

Po prostu zmień tak, aby obiekt wyszukiwania filtra korzystał z obiektu wyszukiwania przetworzonych danych; więc po prostu zmień parametr z this.options.data na this.data. Wystarczająco łatwe!

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>

przykład od Here

Answer 4

tu jest moje rozwiązanie, aby korzystać z filtrów dinamyc w bootstrap stole i umieścić go w ajax złożyć do serwera. Zwróć uwagę, że "dane" są umieszczone w jednym polu.

Przykład: 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>