DataTable 后端分页

基础代码

• DataTable默认的分页机制为前端分页，此处不过多陈述，通过查找资料了解到，后端分页需要将原来的

bServerSide:false  // 修改为true  

• 后端分页对返回的JSON数据格式有要求，具体格式如下：

{"sEcho":"1","iTotalRecords":"0","iTotalDisplayRecords":"0","aaData":[]}

• 其中sEcho是前端传递的，只需获取然后原数返回即可，iTotalRecords字面理解意思是当前数据表中总的记录数，iTotalDisplayRecords是当前页面要展示的记录数，aaData为返回列表的数据。

html代码

<div class="col-lg-5">  
    <table class="table table-striped table-bordered table-hover dataTables-asset" id="dataTables-asset">
         <thead>
                <th class="text-center">{% trans "Task ID" %}</th>
                <th class="text-center">{% trans "Hostname" %}</th>
                <th class="text-center">{% trans "IP" %}</th>
                <th class="text-center">{% trans "Status" %}</th>
                <th class="text-center">{% trans "Start Date" %}</th>
                <th class="text-center">{% trans "End Date" %}</th>
                <th class="text-center">{% trans "Total Time" %}(s)</th>
         </thead>
    </table>
</div>  

JS代码

function dataTableDraw(){  
 $("#dataTables-asset").dataTable({
  bServerSide:true,       //开启后端分页
  bDestroy: true,         //下边两个属性应该是重载数据相关的 不加在加载数据会弹窗报错 点击确定后显示数据
  bRetrieve: true,
  bProcessing: true,       //显示加载数据时的提示
  bInfo:true,  //显示信息 如 当前x页 共x条数据等
  bSort:true,  //允许排序
  bFilter:true,  //检索、筛选框
  sAjaxSource: "{% url 'jobs:batch_scripts_taskschedule' %}", //请求url
  bLengthChange:true, //支持变更页面显示数据行数
  sPaginationType: "bootstrap", //翻页风格
  bPaginate:true,  //显示翻页按钮
  fnServerData: retrieveData, //执行函数
  sScrollX:true,  //滚动条
  aoColumns:[//列表元素  支持多种属性 
         { "data": "id" },
         { "data": "hostname","bSortable":false}, //不允许当前页排序
         { "data": "ip" },
         { "data": "status" },
         { "data": "start_time","fnRender":function(data,val){
         var JSONTime = new Date(val.time);
         return JSONTime.format('yyyy-MM-dd HH:mm:ss');}},

         { "data": "end_time"},
         { "data": "total_time" },
               ],
  oLanguage: {  
       "sProcessing" : "正在加载中......",  
       "sLengthMenu" : "_MENU_",  
       "sZeroRecords" : "无记录",  
       "sEmptyTable" : "表中无数据存在！",  
       "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _MAX_  条记录",  
       "sInfoEmpty" : "没有数据",  
       "sInfoFiltered" : "数据表中共为 _TOTAL_ 条记录",  
       "sSearch" : " ",  
       "oPaginate" : {  
       "sFirst" : " 首页 ",  
       "sPrevious" : " 上一页 ",  
       "sNext" : " 下一页 ",  
       "sLast" : " 末页 "  
    }  
  }  
}).off("click").on("click", function(event) {
    var TaskScheduleID = ($(event.target).closest("tr").attr("id"));
    get_data(TaskScheduleID);
    //增加一个点击事件
 });;
 $(".dataTables_wrapper .dataTables_filter input").attr("placeholder","检索内容");
}
//对应上边的回调函数 参数个数不变 名字可改 第一个为请求url  第二个为上送数据 第三个为回调函数
function retrieveData(sSource,aoData,fnCallback) {  
 var startDate = {
   "name":"startDate",
   "value":$("#from").val()
 }
 var endDate = {
   "name":"endDate",
   "value":$("#to").val()
 }
 //我这里按照请求数据的格式增加了自己的查询条件 请求数据格式固定为 name-value的格式 可以使用
 //alert打印查看 包含了基本的页码、页面数据元素、等信息以及新增的查询条件
 aoData.push(startDate);
 aoData.push(endDate);
 $.ajax({
     url : sSource,//这个就是请求地址对应sAjaxSource
     data : {"aoData":JSON.stringify(aoData),"jobid": "{{ job_obj.id }}"},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,自定义的一个任务ID
     type : 'post',
     dataType : 'json',
     async : false,
     success : function(result) {
         fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
     },
     error : function(msg) {
        alter(result["error"]);
     }
 });
}