關於bootstrap-table服務端分頁問題

昨天項目中涉及到了前端表格分頁問題。數據一共有1萬多條，所以選擇了后端分頁。

之前用的都是前端分頁，第一次使用后端分頁。網上也找到了一些例子，最后做出來了。

這里用的是bootstrap-table插件。沒有用過的可以點以下鏈接去看看

bootstrap-table中文文檔：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

bootstrap-table各種例子demo:https://github.com/wenzhixin/bootstrap-table-examples

好了，廢話太多

html記得引用插件，然后加入一個table就可以測試了

 

js代碼

$('#YourTable').bootstrapTable({
    method: 'get',
    contentType: "application/x-www-form-urlencoded",//一種編碼。好像在post請求的時候需要用到。這里用的get請求，注釋掉這句話也能拿到數據
    url:"your-server-url",//要請求數據的文件路徑
    dataField: "data",//這是返回的json數組的key.默認好像是"rows".這里只有前后端約定好就行
    pageNumber: 1, //初始化加載第一頁，默認第一頁
    pagination:true,//是否分頁
    queryParams:queryParams,//請求服務器時所傳的參數
    sidePagination:'server',//指定服務器端分頁
    pageSize:10,//單頁記錄數
    pageList:[10,20,30,40],//分頁步進值
    responseHandler:responseHandler,//請求數據成功后，渲染表格前的方法
    colums :[{//列參數
        field : "id",
        title : "id",
    },{
        field : "name",
        title : "名稱",
    },{
        field : "price",
        title : "價格"
    }]
})

//請求服務數據時所傳參數
function queryParams(params){
    return {
        pageSize : params.limit, //每一頁的數據行數，默認是上面設置的10(pageSize)
        pageIndex : params.offset/params.limit+1, //當前頁面,默認是上面設置的1(pageNumber)
        param : "Your Param" //這里是其他的參數，根據自己的需求定義，可以是多個
    }
}

//請求成功方法
function responseHandler(result){
    var errcode = result.errcode;//在此做了錯誤代碼的判斷
    if(errcode != 0){
        alert("錯誤代碼" + errcode);
        return;
    }
    //如果沒有錯誤則返回數據，渲染表格
    return {
        total : result.dataLength, //總頁數,前面的key必須為"total"
        data : result.rowDatas //行數據，前面的key要與之前設置的dataField的值一致.
    };
};

//刷新表格數據,點擊你的按鈕調用這個方法就可以刷新
function refresh() {
    $('#YourTable').bootstrapTable('refresh', {url: "your-server-url"});
}

后端返回的數據結構

要用后端分頁，就必須傳頁碼和每一頁行數給后端。而且后端的返回必須要有總數和當前頁數據。

如果跟后端約定好，返回的數據格式第一層包含“rows”(行數據)和“total”(總數)。responseHandler可以不用寫。

大家只要理解原理，就能按照自己的需求或者限制去做出自己想要的效果了

最后結果如下

（有什么疑問的可以一起交流）