bootstrap-table服务端分页操作

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

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

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

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

其中

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

row：返回的是数据内容；

前端bootstrap-table接收

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

<table id= "quaTable"  style="background-color:#FFF;!important;" >
</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');
        }
    });