bootstrap-table实现自定义翻页&自定义搜索

自定义翻页：

$('#table').bootstrapTable({
    ajax: page_function,    // 自定义一个ajax函数
    pageNumber : 1,    // 起始页
    pagination : true,    // 开启翻页
    sidePagination : 'server',    // 翻页实现为服务端。client为前端实现
    pageSize : 50,    // 初始单页数量
    queryParams : function(params) {    // 自定义查询参数
        var temp = {
            limit : params.limit, // 每页显示数量
            page : params.offset / params.limit, // SQL语句起始索引
        };
        return temp;
    },
})

// 自定义的ajax函数
function ajax_get_dns_list(params){
    // 这里处理一下url。
    // params.data为前面bootstrap-table中queryParams的返回值
    // params.data = {limit, page}
    // limit：每页显示数量，page：第几页
    // SQL：SELECT * FROM `tb` LIMIT page*limit, limit
    $.ajax({
        url,
    type: "GET",
    dataType: "json",
    success: function(rs){
        var total = rs.total;    //后端要返一下总数量，以便分页
        var rows = rs.rows;    //所有的行
        params.success({ // 参数传回
            total: total,
            rows: rows
        });
    },
    error: function(rs){
        console.error(rs)
    }
    });
}

自定义搜索

html里新建一个div，可以多个字段，下面以3个字段为例

<div class="form-inline" id="toolbar">
    <label>关键词搜索 </label>
    <input class="form-control mb-2 mr-sm-2" id="xx1" type="text" placeholder="字段1">
    <input class="form-control mb-2 mr-sm-2" id="xx2" type="text" placeholder="字段2">
    <input class="form-control mb-2 mr-sm-2" id="xx3" type="text" placeholder="字段3">
    <button id="search_btn" class="btn btn-default">搜索</button>
</div>

js:

$('#table').bootstrapTable({
    ajax: ajax_with_search,    // 自定义个ajax函数
    striped : true,
    pageNumber : 1,
    pagination : true,
    sidePagination : 'server',
    pageSize : 50,
    toolbar: "#toolbar",    // 绑定刚刚html建好的toolbar
    queryParams : function(params) {
        var temp = {
        limit : params.limit, 
        page : params.offset / params.limit,
        xx1: $('#xx1').val(), // 获取查询参数
        xx2: $('#xx2').val(), // 获取查询参数
        xx3: $('#xx3').val() // 获取查询参数
    };
    console.log(temp);
    return temp;
    }
})

接着在自定义的ajax函数中将查询参数传给后端即可