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>