bootstrap-table custom function (search function)

bootstrap-table custom search function

The native search function of bootstrap-table is not suitable for all projects, so I customized one and carefully understood the bootstrap source code, not just using the framework. After understanding the calling process, other function buttons, search buttons and search boxes can also be added. The display position can be adjusted by css or js, so I won't go into details.

 

Effect:

 

step:

bootstrap-table.js Modify bootstrap-table source code

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));
    }
}

Define the search box

<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, when calling 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;
}