bootstrap-table服务端分页操作

由于数据库查询的数据过多，所以采取服务端分页的操作，避免一次性加载的数据量过多，导致页面加载缓慢。

后端数据的封装格式json数据

rows里的数据是当前页的数据，total是总条数：

{
    "total": 200,
    "rows": [{
        "name": "张三",
        "age": 23
    }, {
        "name": "张三",
        "age": 23
    }]
}

其中

total：是查询的数据总条数，可以自定义；

row：返回的是数据内容；

前端bootstrap-table接收

1.页面上定义表格加载的位置

<table quaTable"   >
</table>

2.js脚本里加载bootstrap-table的内容

var queryParams = function (params) {
    var param = {
         //每页多少条数据
            pageSize: params.limit,
            //请求第几页
            pageIndex:params.offset+1,
            task_title :$("#query_task_title").val(),
            req_no :$("#query_req_no").val()
    }
    return param;
}

function queryData(){
    $("#quaTable").bootstrapTable(\'destroy\'); //在初始化table之前，要将table销毁，否则会保留上次加载的内容
    $(\'#quaTable\').bootstrapTable({
        url: "/defect/getList", //请求后台的URL（*）
        method: \'post\',                      //请求方式（*）
        contentType : "application/x-www-form-urlencoded",
        toolbar: \'#toolbar\', 
        striped: true,                      //是否显示行间隔色
        queryParams: //传递参数（*）
                function (params) {
                    var param = {
                           //每页多少条数据
                            pageSize: params.limit,
                            //请求第几页
                            pageIndex:params.offset+1,
                            task_title :$("#query_task_title").val(),
                            req_no :$("#query_req_no").val()
                            }
                            return param;
                    },
        clickToSelect: true,                //是否启用点击选中行
        pagination: true,
        //分页方式：client客户端分页，server服务端分页（*）
        sidePagination: "server",
        pageList: [10, 15, 20, 25, 30], 
        pageNumber:1, 
        pageSize: 10,
        columns:
            [ {field: \'selectItem\', radio: true},
              {title: \'姓名\', field: \'name\' },
              {title: \'年龄\', field: \'age\'}
            ],  
        responseHandler:function (res) {
            return {
            "rows": res.rows,
            "total": res.total
            };              
        },
        showExport: true,
        onPostBody : function(){
            $("#quaTable tbody tr:nth-child(odd)").addClass("oddColor");
        },
        onLoadSuccess : function() { //加载成功时执行  
            $(\'#quaTable\').bootstrapTable(\'hideColumn\', \'RESPONSIBLE_PERSON\');
        }
    });