jquery datatables实现服务端分页

网上找的大多数都不能解决问题,自己写个以后可以翻阅。
对这个插件不是很了解,哪里错了麻烦提出。
版本: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参数引用那部分已经找不到原创文章了。如有侵权,请联系删除。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值