twitter bootstrap - tabla - ¿Cómo se usa la búsqueda de bootstrap-table para buscar y filtrar?

hacer un buscador con js

Question

Estoy usando bootstrap para dibujar una tabla, y necesito tanto la función de búsqueda como la de filtro. Pero la función de búsqueda no puede funcionar después de agregar la función de filtro. cuando elimino la fila "", la función de búsqueda funciona, pero la función de filtro desaparece, ¿cómo se usa la función? Aquí está el código:

<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

Encontré cómo arreglarlo. En el archivo /bootstrap-table/extensions/filter/bootstrap-table-filter.min.js está este código (descomprimido):

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

Lo cambié en esto (función definida retitulada initSearch para 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);

Y ahora tanto el filtro como la búsqueda están funcionando. Pero todavía tiene un error, si usa buscar y luego filtrar o viceversa.

Answer 2

aquí está mi Solución para usar los filtros dinamyc en bootstrap-table y colocarlo en el ajax submit to the server. Tenga en cuenta que los "datos" se colocan en un solo campo.

Ejemplo: Aquí

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

Answer 3

Encontré una solución a este problema, el complemento de filtro estaba restableciendo el objeto de datos Búsqueda. Lo rastreó hasta el archivo bootstrap-table-filter.js :

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

Los datos buscados se almacenan en this.data, pero el filtro estaba usando this.options.data, que es el objeto de datos de tabla completo, no filtrado.

Simplemente cámbielo para que el objeto de búsqueda de filtro use el objeto de búsqueda de datos procesados; así que simplemente cambie el parámetro de this.options.data a this.data. ¡Suficientemente fácil!

Answer 4

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

Ejemplo de aquí