All geek questions in one place

How does the boot table use search and filter?

I use bootstrap to draw a table, and I need a search and filter function. But the search function cannot work after adding the filter function. when I delete the line "", the search function works, but the filter function disappears, how to use both functions? Here is the 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', }; } }); });
+6
source share
4 answers

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

Example from here

+9
source

I found how to fix it. In the file / bootstrap -table / extensions / filter / bootstrap-table-filter.min.js there is this code (unpacked):

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

I changed it to this (renamed the specific initSearch function to 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);

And now both the filter and the search work. But it still has an error if you use search and then filter or vice versa.

0
source

I found a solution to this problem, the Searched data object was reset using the filter plugin. Traced it to bootstrap-table-filter.js file :

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

Distorted data is stored in this.data files, but the filter used this.options.data, which is the entire data object without a filter.

Just change it so that the filter search object uses the processed search data object; so just change this.options.data to this.data. Easy enough!

0
source

here is my solution to use dinamyc filters in bootstrap table and put it in ajax submit to server. Please note that "data" is placed in only one field.

Example: 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>
0
source

Source: https://habr.com/ru/post/980698/

More articles:


All Articles