datatables服务端分页配置最新教程2018

datatables服务端分页配置

datatables可以说是个好东西吧，几行js代码就能够让你初始化一个表格，很方便，但是要用好还是很困难的，因为配置太多太多了，网上的大多数是一些陈旧的配置，如果datatables更换了这么多版本，网上很多配置都有一些问题，我这里也不是datatables的基础教程，我这里就谈一下服务端分页怎么配置，因为我项目中用到了，笔以记之。后之览者，亦将有感于斯文~

一、必备

引入

<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

主体

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>

js代码

$(document).ready(function() {
$('#example').DataTable();
} );

有这三个部分文件放到一个html中，你就可以实例化一个表格了，很容易对吧

二、分页

代码

<script type="text/javascript">

var myTable;
$(document).ready(function() {

myTable = $('#projectTable').DataTable( {
"processing": true,//刷新的那个对话框
"serverSide": true,//服务器端获取数据
"paging": true,//开启分页
lengthMenu: [ //自定义分页长度
[ 20, 50, 100 ],
[ '20 页', '50 页', '100页' ]
],
ordering:false,
"ajax": {
"url": "/api/get_project_list",
"type": "POST",
"data": function (d) {
//删除多余请求参数
for(var key in d){
if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
delete d[key];
}
}
var searchParams= {
"retryType":$("#retryType").val(),
"departmentCode":$("#departmentCode").val()!=""?$("#departmentCode").val():null,
"projectCode":$("#projectCode").val()!=""?$("#projectCode").val():null,
"serviceName":$("#serviceName").val()!=""?$("#serviceName").val():null,
"csrfmiddlewaretoken":csrftoken
};
//附加查询参数
if(searchParams){
$.extend(d,searchParams); //给d扩展参数
}
},
"dataType" : "json",
"dataFilter": function (json) {//json是服务器端返回的数据
json = JSON.parse(json);
var returnData = {};
returnData.draw = json.data.draw;
returnData.recordsTotal = json.data.total;//返回数据全部记录
returnData.recordsFiltered = json.data.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = json.data.retryProjectList;//返回的数据列表
return JSON.stringify(returnData);//这几个参数都是datatable需要的，必须要
}
},
"searching" : false,
"columns": [
{ "data": "id" },
{ "data": "departmentCode" },
{ "data": "projectCode" },
{ "data": "serviceName" },
{ "data": "alertMail" },
{ "data": "callbackUrl" },
{ "data": "descInfo" },
{ "data": "companyId" },
{ "data": "retryType" },
{ "data": "retryCircle" },
{ "data": "createTime" },
{ "data": "updateTime" },
{ "data": "createUser" },
{ "data": "updateUser","defaultContent": ''},
{ "data": "validVal" },
{ "data": "retryTimes" }
],
"oLanguage" : { // 国际化配置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有找到数据",
"sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "查询",
"sUrl" : "",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
}
});

});
</script>

​给表格加上自定义列：

{
data: function (data, type, full) {
return "<button class=\'btn btn-warning btn-xs\' onclick='updateMyForm("+JSON.stringify(data)+")'>修改</button>  <button class=\'btn-xs btn btn-warning\'>详情</button>";
},
className: "center",
defaultContent: '<button class=\'btn btn-warning btn-xs\' onclick="updateMyForm()">修改</button>  <button class=\'btn-xs btn btn-warning\'>详情</button>'
}

讲解

大家按照我这个配置去配置基本可以完成datatables服务端分页配置，重点需要讲解的是dataFilter这个配置必须要，必须要，必须要，服务端分页要求我们传递draw，recordsTotal，recordsFiltered，data 这几个字段，请不要写错字母，不然分页就拜拜了，dataFilter 能够帮你解决这个问题，因为你不能总要求服务端有这几个字段吧

注意部分

datatables手动刷新方法

myTable.ajax.reload(); //myTable是上面我实例化的对象

Over，也是给自己做个笔记吧~