jquery-datatable之服务器分页

上一篇讲了jquery-datatable的基本参数配置，并且讲了一个小demo。下面讲jquery-datatable之服务器分页。

jquery-datatable的官方网站讲了很多例子，但是没有给出一个完成的服务端分页的例子，网上有很多这方面的例子，但是写的都不完成，所以导致很多开发不能体会到其强大的能力。下面将会介绍jquery-datatable+springMVC的一个完成例子：

首页，直接上js代码：

 

$("#sample_editable_1")

                    .dataTable(

                            {

                                "bPaginate" : true,// 分页按钮

                                "bFilter" : true,// 搜索栏

                                "bLengthChange" : 10,// 每行显示记录数

                                "iDisplayLength" : 10,// 每页显示行数

                                "bSort" : true,// 排序

                                "bInfo" : true,// Showing 1 to 10 of 23 entries

                                "bAutoWidth" : true, // 自动计算列宽度

                                "sPaginationType" : "full_numbers", // 分页，一共两种样式

                                "bProcessing" : true,

                                "bServerSide" : true,

                                "bDestroy" : true,

                                "bStateSave" : true,

                                "sDom" : "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",

                                "sPaginationType" : "bootstrap",

                                "sAjaxSource" : "ajax-role.shtml?rand="

                                        + Math.random(),

                                "fnServerData" : retrieveData,

                                "aaSorting" : [ [ 0, "asc" ] ],

                                "aoColumns" : [

                                        {

                                            "mDataProp" : "id",

                                            "bSortable" : true

                                        },

 

                                        {

                                            "mDataProp" : "code",

                                            "bSortable" : false

                                        },

                                        {

                                            "mDataProp" : "name"

                                        },

                                        {

                                            "mDataProp" : "",

                                            "fnRender" : function(obj) {

                                                var sReturn = '<a class="edit" data-toggle="modal"  href ="#myModal">Edit</a>';

                                                return sReturn;

                                            }

                                        },

                                        {

                                            "mDataProp" : "",

                                            "fnRender" : function(obj) {

                                                var sReturn = '<a class="delete" href = "javascript:;">Delete</a>';

                                                return sReturn;

                                            }

                                        }

 

                                ],

                                "oLanguage" : {

                                    "sLengthMenu" : "显示 _MENU_ 条 ",

                                    "sZeroRecords" : "没有您要搜索的内容",

                                    "sInfo" : "从 _START_  到  _END_ 条记录——总记录数为 _TOTAL_ 条",

                                    "sInfoEmpty" : "记录数为0",

                                    "sInfoFiltered" : "(全部记录数 _MAX_ 条)",

                                    "sInfoPostFix" : "",

                                    "sSearch" : "搜索",

                                    "oPaginate" : {

                                        "sFirst" : "第一页",

                                        "sPrevious" : " 上一页 ",

                                        "sNext" : " 下一页 ",

                                        "sLast" : " 最后一页 "

                                    }

                                }

                            });

function retrieveData(sSource, aoData, fnCallback) {

    $.ajax({

        "type" : "POST",

        "contentType" : "application/json",

        "url" : sSource,

        "dataType" : "json",

        "data" : JSON.stringify(aoData),

        "success" : fnCallback

    });

}

以上代码，大家读了我写的第一节，就会很自然的明白了，这里主要是sAjaxSource，这是请求服务端的地址。必须要的。

下面上java代码：

 

@RequestMapping(value="ajax-role",method = RequestMethod.POST)

    @ResponseBody

    public Object ajaxRole(@RequestBody List<Object>param) throws IOException{

        DataTableParameter data =new DataTableParameter();

       Map<String,Object>map =ObjectConvertMap.convertToMap(param);

      List<Role>roles =Lists.newArrayList();

      roles =roleService.getRoles(map);

      Long totalCount =roleService.getRoleTotalNumber(map)；

      data.setAaData(roles);

      data.setiTotalDisplayRecords(totalCount);

      data.setiTotalRecords(totalCount);

      data.setsEcho(map.get("sEcho")+"");

      return data;

    }

List<Object>param是接受到的参数集合（"data" : JSON.stringify(aoData)）这里一个list的集合，首先将其装换成一个map

 public static Map<String,Object>convertToMap(List<Object>list){
        Map<String,Object>map =Maps.newHashMap();
        for(Object ob:list){
            Map<String,Object> param =(Map<String, Object>) ob;
          map.put(param.get("name")+"",param.get("value"));
        }
        return map;
    }

然后进行具体的业务逻辑，获取数据。注意：

map里面的两个主要参数iDisplayStart ，iDisplayLength（从第几条开始显示，显示的长度）

这两个参数是分页用到的参数

返回数据

DataTableParameter是对参数的封装

    private static final long serialVersionUID = 1L;

    private String sEcho;

    private Long iTotalRecords;

    private Long iTotalDisplayRecords;

    private List<?>aaData =Lists.newArrayList();

以上属性必须要有，并且属性名称也要一致，否则js无法解析。