Jquery datatable jsonp 显示后台json数据

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系列中的第一篇，以后陆续会发，敬请期待。