Bảng khởi động sử dụng tìm kiếm và bộ lọc như thế nào?

Question

Tôi đang sử dụng bootstrap để vẽ một bảng và tôi cần cả chức năng tìm kiếm và bộ lọc. Nhưng chức năng tìm kiếm không thể hoạt động sau khi tôi thêm chức năng lọc. khi tôi xóa hàng "", chức năng tìm kiếm hoạt động, nhưng chức năng lọc biến mất, cách sử dụng cả hai chức năng? Đây là mã:

<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

tôi đã tìm cách khắc phục. Trong tập tin /bootstrap-table/extensions/filter/bootstrap-table-filter.min.js là mã này (giải nén):

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

tôi đã thay đổi nó về vấn đề này (đổi tên hàm được định nghĩa 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); 

Và giờ cả bộ lọc và tìm kiếm đều hoạt động. Nhưng nó vẫn có một lỗi, nếu bạn sử dụng tìm kiếm và sau đó lọc hoặc ngược lại.

Answer 2

Tôi đã tìm thấy giải pháp cho vấn đề này, đối tượng dữ liệu được Tìm kiếm đã được đặt lại bởi plugin bộ lọc. Theo dõi nó xuống bootstrap-table-filter.js file:

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

Các tìm kiếm dữ liệu được lưu trữ trong this.data, nhưng bộ lọc được sử dụng this.options.data, mà là toàn bộ, un-lọc đối tượng bảng dữ liệu.

Chỉ cần thay đổi để đối tượng tìm kiếm bộ lọc sử dụng đối tượng dữ liệu được xử lý tìm kiếm; do đó, chỉ cần thay đổi tham số từ this.options.data thành this.data. Vừa đủ dễ!

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>

Ví dụ Từ Here

Answer 4

đây là giải pháp của tôi để sử dụng các bộ lọc dinamyc trong bootstrap-bảng và đặt nó trong ajax nộp cho máy chủ. Lưu ý rằng "dữ liệu" chỉ được đặt trong một trường.

Ví dụ: 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>