bootstrap table 前端搜索

/**
* @author: aperez <aperez@datadec.es>
* @version: v2.0.0
*
* @update Dennis Hernández <http://djhvscf.github.io/Blog>
*/ !function($) {
'use strict'; var firstLoad = false; var sprintf = $.fn.bootstrapTable.utils.sprintf; var showAvdSearch = function(that) {
var timeoutId=0;
$('#'+ that.options.idTable).off('keyup blur', 'input').on('keyup blur', 'input', function (event) {
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
that.onColumnAdvancedSearch(event);
}, that.options.searchTimeOut);
});
}; $.extend($.fn.bootstrapTable.defaults, {
advancedSearch: false,
actionForm: '',
idTable: undefined,
onColumnAdvancedSearch: function (field, text) {
return false;
}
}); $.extend($.fn.bootstrapTable.defaults.icons, {
advancedSearchIcon: 'glyphicon-chevron-down'
}); $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
'column-advanced-search.bs.table': 'onColumnAdvancedSearch'
}); $.extend($.fn.bootstrapTable.locales, {
formatAdvancedSearch: function() {
return 'Advanced search';
},
formatAdvancedCloseButton: function() {
return "Close";
}
}); $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales); var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initToolbar = BootstrapTable.prototype.initToolbar,
_load = BootstrapTable.prototype.load,
_initSearch = BootstrapTable.prototype.initSearch; BootstrapTable.prototype.initToolbar = function() {
_initToolbar.apply(this, Array.prototype.slice.apply(arguments)); /*if (!this.options.search) {
return;
}*/ if (!this.options.advancedSearch) {
return;
} if (!this.options.idTable) {
return;
} var that = this;
showAvdSearch(that);
}; BootstrapTable.prototype.load = function(data) {
_load.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.advancedSearch) {
return;
} if (typeof this.options.idTable === 'undefined') {
return;
} else {
if (!firstLoad) {
var height = parseInt($(".bootstrap-table").height());
height += 10;
$("#" + this.options.idTable).bootstrapTable("resetView", {height: height});
firstLoad = true;
}
}
}; BootstrapTable.prototype.initSearch = function () {
_initSearch.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.advancedSearch) {
return;
} var that = this;
var fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial; this.data = fp ? $.grep(this.data, function (item, i) {
for (var key in fp) {
var fval = fp[key].toLowerCase();
var value = item[key];
value = $.fn.bootstrapTable.utils.calculateObjectValue(that.header,
that.header.formatters[$.inArray(key, that.header.fields)],
[value, item, i], value); if (!($.inArray(key, that.header.fields) !== -1 &&
(typeof value === 'string' || typeof value === 'number') &&
(value + '').toLowerCase().indexOf(fval) !== -1)) {
return false;
}
}
return true;
}) : this.data;
}; BootstrapTable.prototype.onColumnAdvancedSearch = function (event) {
var text = $.trim($(event.currentTarget).val());
var $field = $(event.currentTarget)[0].id; if ($.isEmptyObject(this.filterColumnsPartial)) {
this.filterColumnsPartial = {};
}
if (text) {
this.filterColumnsPartial[$field] = text;
} else {
delete this.filterColumnsPartial[$field];
} this.options.pageNumber = 1;
this.onSearch(event);
this.updatePagination();
this.trigger('column-advanced-search', $field, text);
}; }(jQuery);

$("#listTable").bootstrapTable({
columns:[
{
title: '序号',
align: 'center',
valign: 'bottom',
//field : 'id',
formatter:function(value,row,index){
return index+1;
}
},{
title: '客户ID',
align: 'center',
field: 'orgId',
visible: false
},{
title : '客户名称',
align : 'center',
field : 'orgName',
searchable : true
},{
title : '户号',
align : 'center',
field : 'account_num'
},{
title : '月份',
align : 'center',
field : 'ele_date' },{
title : '用电量需求（单位：兆瓦时）',
align : 'center',
field : 'ele_need_mount'
},{
title : '意向成交价差 （单位：元/兆瓦时）',
align : 'center',
field : 'intent_ele_price'
},{
title : '查看',
align : 'center',
field : 'fj'
}],
striped: true, //隔行变色
strictSearch: true,
clickToSelect: true,
cache:false,
showRefresh: true,
pagination: false,
pageNumber:1,
pageSize: 15,
pageList: [5, 10, 15, 20, 25],
showExport: true,//显示导出按钮
exportDataType: "basic",//导出类型
sidePagination: "client",
advancedSearch:true,//允许外部搜索 这个是扩充的js里面的属性
56 idTable:"abc",//搜索input的父级id
searchOnEnterKey:false,
strictSearch:false,
queryParamsType : "limit",
//search : true,
// searchText : "客户名称",
//toolbar: '#toolbar',
data:tableData
}); //search下面的内容除了选择器都是固定的
$("#listTable").on('post-body.bs.table', function () {
//debugger;
console.log($("#listTable").data);
var $search = $("#listTable").data('bootstrap.table').$toolbar.find('.search input');
$search.attr('placeholder', '客户名称');
$search.parents(".fixed-table-toolbar").css({position:'absolute',top: '-53px',right: '16px'});
}); });