Jquery datatable jsonp 显示后台json数据

最新推荐文章于 2022-08-17 10:13:26 发布

原创最新推荐文章于 2022-08-17 10:13:26 发布 · 8.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery datatable

本文介绍了如何利用JSONP解决跨域JavaScript交互问题，结合jQuery DataTable展示JSON数据的方法，包括Spring MVC后台代码实现及前端配置。

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