SpringBoot结合dataTables（Ajax，分页，新增列）
需求
说在前面：首先用静态的方式集成dataTables，能跑之后，再对照下面的实现来实现动态功能。
目标是实现一个动态的dataTables实例，通过Ajax方式获取数据，带有分页功能，并新增一列。
实现
HTML部分
//css引入 dataTables包
<link rel="stylesheet" type="text/css" href="/css/component/jquery.dataTables.min.css"/>
<table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
</table>
//js引入 dataTables包
<script src="/js/jquery.js"></script>
<script src="/js/component/jquery.dataTables.min.js"></script>js代码自定义部分
<script>
$(function () {
//提示信息 初始化设置 一般不需要改
var lang = {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
//重要修改 表格内容的自定义，需要根据业务定制
var table = $("#example").dataTable({
language:lang, //提示信息
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜索
orderMulti: false, //启用多列排序
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
columnDefs: [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort’的禁止排序
}],
ajax: function (data, callback, settings) {
//封装请求参数
var param = {};
param.pageSize= data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.startIndex = data.start;//开始的记录序号
param.pageIndex = (data.start / data.length);//当前页码
//ajax请求数据方法
$.ajax({
type: "GET",
url: "/query",//url请求的地址
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
success: function (result) {
//封装返回数据重要
var returnData = {};
//这里直接自行返回了draw计数器,应该由后台返回
returnData.draw = data.draw;
//返回数据全部记录
returnData.recordsTotal = result.pageInfo.totalCount;
//后台不实现过滤功能，每次查询均视作全部结果
returnData.recordsFiltered = result.pageInfo.totalCount;
//返回的数据列表
returnData.data = result.pageInfo.data;
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}
});
},
//列表表头字段
columns: [
{ "data": "id" },
{ "data": "name" },
{ "data": "gender" },
//新建列的 定义
{
className : "td-operation text-center",
data: null,
defaultContent:"",
orderable : false,
width : "160px"
}
],
//新建列的 数据内容
"createdRow": function ( row, data, index ) {
//行渲染回调,在这里可以对该行dom元素进行任何操作
var $btn = $('<div class="btn-group text-cen">'+
'<button type="button" class="btn btn-sm btn-primary btn-edit">修改</button>'+
'<button type="button" class="btn btn-sm btn-danger btn-del">删除</button>'+
'</div>'+
'</div>');
$('td', row).eq(3).append($btn);
}
}).api();
//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
});
</script>后台Controller
//查询
@RequestMapping(value = "/query", method = RequestMethod.GET)
@ResponseBody
public RtPageInfo query(
@RequestParam(required = false, name = "pageSize") Integer pageSize,
@RequestParam(required = false, name = "startIndex") Integer startIndex,
@RequestParam(required = false, name = "pageIndex") Integer pageIndex){
//这里做查询操作
//返回
RtPageInfo pageInfo = new RtPageInfo();
pageInfo.setData(data);//这里是数据内容 List
pageInfo.setPageNum(startIndex/pageSize);//Integer
pageInfo.setPageSize(pageSize);//pageSize
pageInfo.setTotalCount(count));//BigInteger
return pageInfo ;
}