Datatables学习之前端分页

现在的项目用的是bootstrap，于是选择了datatables显示表格数据。

导入需要的js以及css文件，分别是jquery.js jquery.datatables.css jquery.datatables.js

html页面代码如下`

<table class="table table-striped table-bordered table-hover"
id="table_id">
<thead>
<th>ID</th>
<th>编码</th>
<th>名称</th>
<th>地址</th>
<th>描述</th>
<th>是否有效</th>
<th>接口状态</th>
<th>轮询间隔</th>
<th>创建时间</th>
<th>备注</th>
<th>是否删除</th>
<th>操作列</th>
</thead>
<tbody>
</tbody>
</table>`

其中和部分必须要有。

datatables初始化：

$(document).ready(function() {
$('#table_id')
.DataTable(
{
"paging": true,
"iDisplayLength": 10, //默认每页数量
//"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": true, //排序功能
"bInfo": true, //页脚信息

4000
"bAutoWidth": true, //自动宽度
"bRetrieve": true,
"processing": true,
//"serverSide" : true,//服务器端进行分页处理的意思
"bPaginate": true,
//"bProcessing": true
"ajax": {
url: "../serviceConfig/getServiceConfigByModel.do",
dataSrc: function(result) {
//这里result和上面jquery的ajax的代码类似，也是可以得到data.json的数据，但是这样的格式，Datatables不能直接使用，这时候需要在这里处理一下
//直接返回Datatables需要的那部分数据即可
return result.data.aaData;
}
},
columns : [
{
data : "id"
},
{
data : "code"
},
{
data : "srvName"
},
{
data : "url"
},
{
data : "description"
},
{
data : "isAllow"
},
{
data : "state"
},
{
data : "frequency"
},
{
data : "createTime"
},
{
data : "remark"
},
{
data : "isDelete",
render : function(
data, type,
row) {
if (data == 0) {
return "未删除";
} else {
return "删除";
}

}
} ],

"columnDefs" : [ {
// 定义操作列,######以下是重点########
"targets" : 11,//操作按钮目标列
"data" : null,
"render" : function(data,type, row) {
var id = '"' + row.id+ '"';
//<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>
var html = "<button class='btn btn-xs btn-success' onclick='add()'><i class='icon-ok'></i> </button>"
html += "<button class='btn btn-xs btn-warning' onclick='edit("
+ id
+ ")'><i class='icon-pencil'></i> </button>"
html += "<button class='btn btn-xs btn-danger' onclick='del("
+ id
+ ")'><i class='icon-remove'></i> </button>"
return html;
}
} ]
});
});

json返回的数据格式可以为自己定义的格式  不过某个部分必须满足打他tables规定的格式  即上文中的dataSrc属性
请求参数没有特殊要求
返回参数必须

returnMap.put("aaData", serviceConfigModels);
returnMap.put("sEcho", "1");
Long iTotalRecords = serviceConfigMapper.selectAllCount();
returnMap.put("iTotalRecords", iTotalRecords);
returnMap.put("iTotalDisplayRecords", iTotalRecords);

如上代码所示，至此datatables前端分页完成