dataTables动态获取后台json数据分页展示

入职第一天就加入到一个新项目的开发中，我负责权限分配这块，所以在前段页面需要用表格来显示用户的权限信息，传统的表格填入信息太繁琐，所以找到了dataTables这个插件，数据绑定这块真的省心很多，初次体验就觉得这插件功能真够强大的，模糊查询、分页等等都进行了封装，废话不多说。

首先是前端引入js相关文件，包括dataTables.bootstrap.css，jquery.dataTables.js，dataTables.bootstrap.js。

1、html页面加入table控件并写好表头

<div style="width: 100%;" id="authorityInformation" >

<table id="typeAuthorityTable"
class="table table-striped table-hover table-bordered" border="2">
<thead>
<tr class="tableHead">
<th class="title">用户账号</th>
<th class="title">用户姓名</th>
<th class="title">单位</th>
<th class="title">权限</th>
<th class="title">授权时间</th>
<th class="title">操作</th>
</tr>
</thead>
</table>

</div>

2、在js脚本里设置datatables的相关属性

typeAuthorityTable=$('#typeAuthorityTable').DataTable({
        searching: false, //是否开启搜索功能
        ordering: false,//是否排序
    processing: true,//获取数据过程中是否出现加载指示
    bPaginate:true,//是否允许分页
    bInfo:true,//是否显示表格相关信息
    destroy:true,//销毁一个实例
    iDisplayLength:5,//分页时每页显示的行数
    bLengthChange:false,
    serverSide: true,//当用ajax请求数据源时，这个属性必须添加，切记
    ajax:{ //使用ajax记得要引入jquery.min.js
    url:'/manage/operatePage', //请求路径，也就是控制器里方法
    type:"post",
    async:true,
    data:{"authorityId":authorityId} //请求参数
    },     
    columns:[  //绑定的数据源，后台的json数据里必须有这些属性，保持一致性
        {"data":"accountNum"},
        {"data":"userName"},
        {"data":"unit"},
        {"data":"authority"},
        {"data":"time"},
        {"data":null} 
    ],
    columnDefs:[
    {
    targets:5,  //对数据源中的第六行进行渲染
    render:function(data,type,row){
    var html = '<a href="javascript:cancelUser('+data['id']+');">取消授权</a>';
    return html;
    }
    }    
  ],
    "oLanguage" : { // 国际化配置
            "sProcessing" : "正在获取数据，请稍后...",
            "sLengthMenu" : "显示 _MENU_ 条",
            "sZeroRecords" : "没有找到数据",
            "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
            "sInfoEmpty" : "记录数为0",
            "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
            "sInfoPostFix" : "",
            "sSearch" : "查询",
            "sUrl" : "",
            "oPaginate" : {
                "sFirst" : "第一页",
                "sPrevious" : "上一页",
                "sNext" : "下一页",
                "sLast" : "最后一页"
            }
        },

});

3、后台控制器相关方法

public void operatePage() {
int authorityId = getParaToInt("authorityId"); //ajax传入的参数
int draw = getParaToInt("draw");
int start = getParaToInt("start");

int length = getParaToInt("length");//draw、start、length是dataTables自动携带的，可以直接获取

//draw应该是请求次数，start和length为sql语句中的从第start条开始，获取length条数据。

List<UserModel> userModel = sqlstatement(start, length, authorityId);//相关sql语句，自己封装即可

if (userModel != null) {
renderJsonTable(draw+1,allRecordSize(),userModel ); //allRecordSize()为总共记录数

} else {

//进行相关操作

} 

}

//返回给前台信息的时候要注意格式和返回数据，必须为json格式，必须包含以下几个属性

public void renderJsonTable(Object draw,Object recordsTotal,Object data) {
Map<String, Object> maps = new HashMap<String, Object>();
maps.put("draw",draw);
maps.put("recordsTotal", recordsTotal);
maps.put("recordsFiltered",recordsTotal);//若不加过滤条件，同recordsTotal
maps.put("data", data);
render(new JsonRender(maps).forIE());

}

//这个项目用的框架是JFinal，所以用上面的方式进行返回数据。

至此，dataTables简单分页功能就已实现。