1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js  bootstrap-table-mytoolbar.js,可以通过结合bootstrap-table简单的配置就可以进行使用,结合实例说明:

bootstrap-table的扩充js内容:

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

配置bootstrap-table的js文件:

     $("#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'});
}); });

对应的html页面是:

<div class="row">
<div class="ibox-title">
<h5>
<i class="fa fa-sitemap"></i> 月度交易结果分配详情列表 <span class='sfont'>(电量单位:兆瓦时
)</span>
</h5>
<div class="fright" style="margin-top: -8px;">
<button class="btn btn-w-m btn-primary editBtn" type="button" style="margin-right: 5px;"
id="edit_btn_input" ng-click="editOperater()">编辑</button>
<span class="tit_inputbox" id="abc"> <input type="text"      //这里的id值是abc 和bootstrap-table设置的需要一样
id="orgName" placeholder="客户名称" />
</span>
</div>
</div>
<div class="col-md-12 ibox-content">
<table
class="table table-striped table-bordered table-hover dataTables-example"
id="sitemap_table"></table>
</div>
</div>

bootstrap table 前端搜索的更多相关文章

  1. Bootstrap table前端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

  2. BootStrap table 传递搜索参数

    看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize.pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有 ...

  3. bootstrap table 插件 搜索

    以前用过easyui datagrid 每次搜索的时候调用datagrid构造方法 重新获取数据, 发现bootstrap-table 插件不行,只需要初始化一次, 以后每次搜索时,直接调用refre ...

  4. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  5. js实现table中前端搜索(模糊查询)

    项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...

  6. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  7. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  8. 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中

    页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...

  9. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

随机推荐

  1. linux命令行下执行循环动作

    在当前子目录下分别创建x86_64 for dir in `ls `;do (cd $dir;mkdir x86_64);done

  2. 采用RedisLive监控Redis服务——安装手册

    #1.gcc编译环境确认 .tgz cd Python- ./configure /bin/python2. /usr/bin/python #运行python查看版本 python -V #进行更改 ...

  3. 生活类App原型制作分享-AnyList

    AnyList是一款可以帮你创建购物清单,并且帮助你整理食谱的生活工具App,前面引导页采用图片+文字的方式,介绍App的用法,登录注册采用选项卡切换的方式,减少了页面切换的繁琐操作,在Mockplu ...

  4. UI设计初学者必看,这款设计神器教你快速入门

    网络时代,网页和手机App已经深入到人们生活的方方面面.这也使得App界面设计越来越受青年求职者们的青睐,并纷纷投入这个行业.但是,作为UI设计初学者,究竟如何才能快速的入门?当今市场上,是否有那么一 ...

  5. 上传文件 input file

    //-----前端文件------- form id="uploadForm" enctype="multipart/form-data"> <in ...

  6. js 分页

    html代码:  <div id="paging_wrap" class="paging-wrap"></div> css代码: div ...

  7. syslog、日志服务器安装、卸载详解、如何安装和卸载EventLog Analyzer

  8. python学习 day2 (3月2日)

    .if if else 和 if elif else 的区别是: 前者 判断第一个 判断完第二个 之后还会执行else: 后者是只有满足条件(即都不符合if.elif里的条件时才会进入else) 不清 ...

  9. 45.UITableView去除分割线

    1.去除所有的分割线 table.separatorStyle = UITableViewCellSelectionStyleNone; 2.去除指定某一行的分割线 cell.separatorIns ...

  10. 【转】mysql查看表空间占用情况

    ${database} 为数据库的名称 /*1.查看索引 (1)单位是GB*/ SELECT CONCAT(ROUND(SUM(index_length)/(**), ), ' GB') AS 'To ...