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