bootstrap-table 自定义功能(搜索功能)

bootstrap-table 自定义搜索功能

bootstrap-table原生搜索功能不适合所有项目，因此自定义了一个，也认真了解了bootstrap源码，而不仅仅停留在使用框架，了解调用流程以后, 也可增加其他功能按钮，搜索按钮和搜索框的显示位置可另外css或js调节，就不一一细说了

效果：

步骤：

bootstrap-table.js   修改bootstrap-table源码

BootstrapTable.DEFAULTS = {
    showSearchButton: false, //默认为隐藏
}

BootstrapTable.prototype.initToolbar = function () {
    #定义按钮，这个位置决定前端显示按钮的顺序
    if (this.options.showSearchButton) {
        html.push(sprintf('<button class="btn btn-default" type="button" name="refresh" id="search" aria-label="refresh" title="搜索">',
        this.options.formatRefresh()),
        sprintf('搜索'),'</button>');
    }

    #触发上传数据到服务端，并重载列表
    if (this.options.showSearchButton) {
        this.$toolbar.find('button[name="refresh"]')
        .off('click').on('click', $.proxy(this.refresh, this));
    }
}

定义搜索框

<div class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" name="search_text" class="form-control" placeholder="Search">
    </div>
</div>

js，调用table时

function initTable() {
    $('#table').bootstrapTable({
        showSearchButton: true, //显示搜索按钮 
    });
}

queryParams: function queryParams(params) { //设置查询参数
    var param = {
        csrfmiddlewaretoken :$("input[name='csrfmiddlewaretoken']").val(),
        pageNumber: params.pageNumber,
        pageSize: params.pageSize,
        search:$("input[ name='search_text' ] ").val(), //定义传输的搜索参数
        order:params.sortOrder,
        sort:params.sortName
    };
    return param;
}