网上找的大多数都不能解决问题,自己写个以后可以翻阅。
对这个插件不是很了解,哪里错了麻烦提出。
版本:jquery datatables1.10.0
实现功能:ajax服务端分页
对应的js代码:
$('.table-sort').dataTable({
processing:true,
serverSide:true,
paging:true,//发现这玩意要不要都可以?
ajax:function(data,drawCallback,settings){
var param = {};
//防止返回数据不一致和收到XSS攻击
param.draw = data.draw;
param.length = data.length;//每页记录数
param.start = data.start;//每页开始记录数
param.page = (data.start / data.length) + 1;//当前页码
param.search = data.search.value;//搜索条件
if (data.order.length > 0) {
param.order = data.columns[data.order[0].column].data;
param.dir = data.order[0].dir;
}
$.ajax({
type: "GET",
url: basePath+"/sys/perm/list",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
success: function (result) {
//封装返回数据
var returnData = {};
returnData.draw = result.result.draw;//原值返回即可
returnData.recordsTotal = result.result.total;//返回数据全部记录
returnData.recordsFiltered = result.result.total;//datatables前端根据此值分页
returnData.data = result.result.list;//返回的数据列表
//调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
drawCallback(returnData);
}
});
},
"deferRender":true,
"columns":[
{
"data":null,
"render":function(data,type,row){
return "<input type = 'checkbox'/>";
}
},
{
"data":"permId"
},
{
"data":"permName"
},
{
"data":"permUrl"
},
{
"data":"perms"
},
{
"data":"permType",
"render":function(data,type,row){
if(row.permType==0){
return "目录";
}else if(row.permType==1){
return "菜单";
}else if(row.permType==2){
return "按钮";
}else{
return "未知资源";
}
}
},
{
"data":"creator"
},
{
"data":"createDate"
}
],
//排序
"aaSorting":[[1,"asc"]]
});
html代码:
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr>
<th scope="col" colspan="8">权限节点</th>
</tr>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="40">ID</th>
<th width="200">权限名称</th>
<th width="200">地址</th>
<th width="100">权限</th>
<th width="100">资源类型</th>
<th width="200">创建人</th>
<th width="100">创建时间</th>
</tr>
</thead>
</table>
controller的代码:
@RequiresPermissions("sys:perm:list")
@RequestMapping("/list")
public @ResponseBody DataResult list(HttpServletRequest request,@RequestParam("page")int currentPage,@RequestParam("length")int limit,@RequestParam("draw")int draw) {
Pagination page = new Pagination(currentPage,limit,true);
List<SysPermission> list = securityService.queryListByPage(page);
Map<String,Object> resultMap = new HashMap<>();
resultMap.put("list", list);
resultMap.put("total", page.getTotal());
resultMap.put("draw", draw);
return DataResult.success().put("result", resultMap);
}
最后来个成品图:
当中ajax参数引用那部分已经找不到原创文章了。如有侵权,请联系删除。