datatable 服務端分頁
首先你需要後端給你的資料格式必須是這樣:
引數名也必須是 :
draw 頁數
recordsTotal:總條數
recordsFiltered:總條數 recordsTotal和recordsFiltered必須都是總條數,不然分頁只能是一頁
data:資料
前端 js程式碼:
var lenPage=0 全域性顯示條數,預設為10
$(function(){
searchList(10,1) 初始顯示10條每頁
//切換顯示條數
$('#table').on( 'length.dt', function ( e, settings, len ) {
lenPage=len //len 代表顯示條數,儲存為全域性,後期會用到
searchList(lenPage,1) //重置表格資料
});
// 點選 分頁
var oTable = $('#table').dataTable();
$('#table').on('page.dt', function () {
var tableSetings=oTable.fnSettings();
var paging_length=tableSetings._iDisplayLength;//當前每頁顯示多少
var page_start=tableSetings._iDisplayStart;//當前頁開始
var page=(page_start / paging_length); //得到頁數值 比頁碼小1
var url="url?limit="+ limit +"&pageIndex="+pageIndex
// page*lenPage 從第幾條開始顯示,比如一頁顯示10條,page*lenPage 為20 就是20條到30條資料,也就是第三頁資料
(page+1) 代表當前第幾頁
listTab(url,lenPage,(page+1),page*lenPage)
} );
})
// 獲取資料 填充表格
function searchList(limit,pageIndex){
// var url="url?limit="+ limit +"&pageIndex="+pageIndex
listTab(url,limit,pageIndex,0)
}
url::代表要傳入獲取資料的路徑
limit:當前顯示的條數
pageIndex:當前是第幾頁
startPage:從第幾條開始顯示
//準備datatable格式
function table(url,limit,pageIndex,startPage) {
$('#czTable').dataTable().fnDestroy();//還原初始化了的datatable
$('#czTable').dataTable().fnClearTable();//清空一下table
$('#czTable').dataTable({
"destroy": true, //初始化表格
"pagingType": "first_last_numbers", //分頁樣式
"bInfo" : false, //是否顯示頁尾資訊,DataTables外掛左下角顯示記錄數
"bSort": false, //是否排序
"processing": true, //是否顯示載入
"serverSide": true,//開啟伺服器處理模式
"searching":false,//搜尋框
"aLengthMenu": [10, 50,100, 500], //更改顯示記錄數選項
"iDisplayLength":limit, //預設顯示的記錄數
"iDisplayStart":startPage, //當開啟分頁的時候,定義展示的記錄的起始序號,不是頁數,因此如果你每個分頁有10條記錄而且想從第三頁開始,需要把該引數指定為20
"ajax": url, //請求資源路徑
"language": {
url: '/cn/datatable.json'
},
"columns":[{
data: "id"
}, {
data: "name"
}]
} );
}