datatable 服务端分页

首先你需要后端给你的数据格式必须是这样:

datatable 服务端分页_第1张图片

参数名也必须是 : 

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)    //重置表格数据
    });

datatable 服务端分页_第2张图片

 

 

   // 点击 分页
    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)
    } );

datatable 服务端分页_第3张图片

})

// 获取数据 填充表格

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"
        }]
    } );
}

 

 

 

 

你可能感兴趣的:(h5)