昨天項目中涉及到了前端表格分頁問題。數據一共有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 :"價格"}]

})//請求服務數據時所傳參數

functionqueryParams(params){return{

pageSize : params.limit,//每一頁的數據行數，默認是上面設置的10(pageSize)

pageIndex : params.offset/params.limit+1, //當前頁面,默認是上面設置的1(pageNumber)

param : "Your Param" //這里是其他的參數，根據自己的需求定義，可以是多個

}

}//請求成功方法

functionresponseHandler(result){var errcode = result.errcode;//在此做了錯誤代碼的判斷

if(errcode != 0){

alert("錯誤代碼" +errcode);return;

}//如果沒有錯誤則返回數據，渲染表格

return{

total : result.dataLength,//總頁數,前面的key必須為"total"

data : result.rowDatas //行數據，前面的key要與之前設置的dataField的值一致.

};

};//刷新表格數據,點擊你的按鈕調用這個方法就可以刷新

functionrefresh() {

$('#YourTable').bootstrapTable('refresh', {url: "your-server-url"});

}

后端返回的數據結構

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

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

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

最后結果如下

(有什么疑問的可以一起交流)

總結

以上是生活随笔為你收集整理的bootstraptable 分页循环_关于bootstrap-table服务端分页问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。