Jquery datable可以说是最强大的jquery组件,可以提供的配置参数非常之多,基本上可以满足所有的table数据展现。本文会介绍使用jsonp这种方式的数据展现。Jsonp是为了解决跨域JavaScript交互问题,基于浏览器回调JavaScript function方法的机制。
1、技术点
1)、 spring mvc
2)、 jquery datatable
3)、 fastjson
4)、 jquery
2、jquery table展示json数据时,后台必须提供的参数
draw 计数器,为了保证ajax请求的顺序性,因为有些异步的请求,不会保证请求的顺序。
recordsTotal 总记录数
recordsFiltered 过滤后的总记录数
data 具体的数据对象数组,用于前台展现
当serverside=true的情况下,并且以ajax的方式提交请求,那么这四个参数必须在后台中必须全部提供,缺一不可,否则jquery table无法显示数据。
2.1 spring mvc 后台代码
@RequestMapping(value = "/getJsonData", produces = "text/plain;charset=utf-8")
@ResponseBody
public String getJsonData(HttpServletRequest req,
@RequestParam(required = false) String callback,
@RequestParam(required = false) String searchType
@RequestParam(required = false) String draw,
@RequestParam(required = false) Integer start,
@RequestParam(required = false) Integer length) {
Map<String, Object> maps = new HashMap<>();
List<AppAccess> results = appAccessService.findList(appAccess, pagerequset);
int totalCount = appAccessService.findListCount(appAccess);
maps.put("draw", draw);
maps.put("recordsTotal", totalCount);
maps.put("recordsFiltered", totalCount);
maps.put("data", results);
JSONPObject obj = new JSONPObject(callback);
obj.addParameter(maps);
return obj.toString();
}
2.2 前端代码
$(document).ready(function () {
var gridTable = $('#grid-table').dataTable({
'serverSide': true,
'ajax': {
'url': '/appaccess/getJsonData',
'dataType': 'jsonp',
'type': 'POST'
},
'aoColumns': [
{'data': 'id'},
{'data': 'appUrl'},
{'data': 'appName'},
{'data': 'manager'},
{'data': 'developer'},
{'data': 'sequence'},
],
// 默认排序字段
'aaSorting': [['0', 'DESC']],
// 禁用列排序
"aoColumnDefs": [
{"bSortable": false, "aTargets": [ 6 , 7]}
],
// 查询表单定义
'searchForm': '#search-form',
// 批量表单开关
'batchEnalble': false
});
});
3、使用jsonp的形式提交json字符串
3.1 前端代码
$(document).ready(function () {
var gridTable = $('#grid-table').dataTable({
'serverSide': true,
'ajax': {
'url': '/appaccess/getJsonData',
'dataType': 'jsonp',
'type': 'POST'
},
'aoColumns': [
{'data': 'id'},
{'data': 'appUrl'},
{'data': 'appName'},
{'data': 'manager'},
{'data': 'developer'},
{'data': 'sequence'},
],
// 默认排序字段
'aaSorting': [['0', 'DESC']],
// 禁用列排序
"aoColumnDefs": [
{"bSortable": false, "aTargets": [ 6 , 7]}
],
// 查询表单定义
'searchForm': '#search-form',
// 批量表单开关
'batchEnalble': false
});
});
3.2 后端代码
@RequestMapping(value = "/getJsonData", produces = "text/plain;charset=utf-8")
@ResponseBody
public String getJsonData(HttpServletRequest req,
@RequestParam(required = false) String callback,
@RequestParam(required = false) String searchType
@RequestParam(required = false) String draw,
@RequestParam(required = false) Integer start,
@RequestParam(required = false) Integer length) {
Map<String, Object> maps = new HashMap<>();
List<AppAccess> results = appAccessService.findList(appAccess, pagerequset);
int totalCount = appAccessService.findListCount(appAccess);
maps.put("draw", draw);
maps.put("recordsTotal", totalCount);
maps.put("recordsFiltered", totalCount);
maps.put("data", results);
JSONPObject obj = new JSONPObject(callback);
obj.addParameter(maps);
return obj.toString();
}
这里是使用阿里巴巴的fastjson中的JSONPObject对象来生成JavaScript function,这个function将会被前端浏览器调用。注意,这里没有配置callback方法的名称。默认情况下,浏览器会生成一个唯一的名称,例如:jQuery203021832338930107653_1443529101136,然后以callback=jQuery203021832338930107653_1443529101136的形式传递给后端。后端处理完数据后,会以
jQuery203021832338930107653_1443529101136{
//这里会包含前台需要的json数据
}
前端浏览器会执行jQuery203021832338930107653_1443529101136这个回调方法来展现json数据。
本文是jquery datable系列中的第一篇,以后陆续会发,敬请期待。