bootstrap table 前端搜索

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>