原文：
Jquery Datatables 异步分页加载数据
正在做的一个Web项目，其中用到了jQuery datatables这个表格控件，说实话挺好用的，顺便自己记录一下
首先，定义一个<table>表格
- <table id="datatable">
- <thead>
- <tr>
- <th>ID</th>
- <th>巡查单ID</th>
- <th>站点ID</th>
- <th>站点名称</th>
- <th>问题描述</th>
- <span style="white-space:pre"> </span><th>状态</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody></tbody>
- </table>
- var dtable;//定义datatable的全局变量
- //其中 fnInitComplete和sSrollY属性控制datatable刷新时不整个页面刷的效果；
- function doSearch() {
- if(dtable!=null){
- dtable.fnClearTable(0);
- dtable.fnDraw(); //重新加载数据
- }else{
- dtable = $("#datatable").dataTable({
- "oLanguage" : { // 汉化
- "sUrl" : "<%=path%>/DataTables/js/dataTables.language.txt"
- },
- "bStateSave" : true,
- "bJQueryUI" : true,
- "bPaginate" : true,// 分页按钮
- "bFilter" : false,// 搜索栏
- "bLengthChange" : true,// 每行显示记录数
- "iDisplayLength" : 10,// 每页显示行数
- "bSort" : false,// 排序
- "bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
- "bWidth" : true,
- "bScrollCollapse" : true,
- "sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认
- "bProcessing" : true,
- "bServerSide" : true,
- "bDestroy" : true,
- "bSortCellsTop" : true,
- "sAjaxSource" : "<%=path%>/jsp/stat.do?action=statRevampList",
- "sScrollY": "100%",
- "fnInitComplete": function() {
- this.fnAdjustColumnSizing(true);
- },
- "fnServerParams" : function(aoData) {
- aoData.push({
- "name" : "statId",
- "value" : encodeURI($("#s_statId").val())
- });
- },
- "aoColumns" : [
- {"mData" : "statCleanRevampId"},
- {"mData" : "statCleanId"},
- {"mData" : "statId"},
- {"mData" : "statName"},
- {"mData" : "problemDes"},
- {"mData" : "revampStatus"} ],
- "aoColumnDefs":[
- {
- "sClass":"center",
- "aTargets":[6],
- "mData":"statCleanRevampId",
- "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
- return '<a href=\"javascript:void(0);\" onclick=\"del('+a+')\">删除</a>'
- + '<a href=\"javascript:void(0);\" onclick=\"editForm('+c.statCleanRevampId+','+c.statCleanId+','
- +c.revampOrgan+',\''+c.statName+'\',\''+c.problemDes+'\')\">编辑</a>'
- + ' <a href=\"javascript:void(0);\" onclick=\"check('+a+',1)\">审核通过</a>'
- + ' <a href=\"javascript:void(0);\" onclick=\"check('+a+',2)\">审核不通过</a>';
- }
- },//隐藏列Index=0，1，2的三列
- {
- "aTargets":[0],
- "visible":false
- },
- {
- "aTargets":[1],
- "visible":false
- },
- {
- "aTargets":[2],
- "visible":false
- }
- ],
- "fnRowCallback" : function(nRow, aData, iDisplayIndex) {//相当于对字段格式化
- if (aData["revampStatus"] == 0) {
- $('td:eq(5)', nRow).html("结束");
- } else if (aData["revampStatus"] == 1) {
- $('td:eq(5)', nRow).html("进行中");
- } else if (aData["revampStatus"] == 2) {
- $('td:eq(5)', nRow).html("完成");
- } else if (aData["revampStatus"] == 3) {
- $('td:eq(5)', nRow).html("驳回");
- }
- },
- "fnServerData" : function(sSource, aoData, fnCallback) {
- $.ajax({
- "type" : 'get',
- "url" : sSource,
- "dataType" : "json",
- "data" : {
- aoData : JSON.stringify(aoData)
- },
- "success" : function(resp) {
- fnCallback(resp);
- }
- });
- }
- });
- }}
后台action返回json格式数据，action方法对应如下内容
- response.setCharacterEncoding("UTF-8");
- PrintWriter out = null;
- String json = null; // 返回的json数据
- try
- {
- out = response.getWriter();
- }
- catch (IOException e)
- {
- e.printStackTrace();
- }
- String statName = null;
- String sEcho = "0";// 记录操作的次数 每次加1
- String iDisplayStart = "0";// 起始
- String iDisplayLength = "10";// size
- int count = 0; //查询出来的数量
- String aoData = request.getParameter("aoData");
- //获取jquery datatable当前配置参数
- JSONArray jsonArray = JSONArray.fromObject(aoData);
- for (int i = 0; i < jsonArray.size(); i++)
- {
- try
- {
- JSONObject jsonObject = (JSONObject)jsonArray.get(i);
- if (jsonObject.get("name").equals("sEcho"))
- sEcho = jsonObject.get("value").toString();
- else if (jsonObject.get("name").equals("iDisplayStart"))
- iDisplayStart = jsonObject.get("value").toString();
- else if (jsonObject.get("name").equals("iDisplayLength"))
- iDisplayLength = jsonObject.get("value").toString();
- else if (jsonObject.get("name").equals("statId"))
- statName = jsonObject.get("value").toString();
- }
- catch (Exception e)
- {
- break;
- }
- }
- JSONArray jsonArray2 = new JSONArray();
- JSONObject jsonObject2 = new JSONObject();
- StatCleanService service = new StatCleanService();
- //为操作次数加1
- int initEcho = Integer.parseInt(sEcho) + 1;
- count = service.getStatCleanRevampCount(statName);//总记录数
- List statFailList = service.getStatCleanRevampList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength), statName);
- for (Object object : statFailList)
- {
- StatCleanRevampNoticeTable table = (StatCleanRevampNoticeTable)object;
- jsonObject2.put("statCleanRevampId", table.getStatCleanRevampId());
- jsonObject2.put("statCleanId", table.getStatCleanId());
- jsonObject2.put("statId", table.getStatId());
- jsonObject2.put("statName", table.getStatName());
- jsonObject2.put("revampStatus", table.getRevampStatus());
- jsonObject2.put("problemDes", table.getProblemDes());
- jsonArray2.add(jsonObject2);
- }
- json = "{\"sEcho\":" + initEcho + ",\"iTotalRecords\":" + count + ",\"iTotalDisplayRecords\":" + count + ",\"aaData\":" + jsonArray2.toString() + "}";
- //传到页面
- out.println(json);
- out.close();
其中参数
- sEcho,iTotalRecords,iTotalDisplayRecords,aaData名称是固定的，不能修改；
- iDisplayStart,iDisplayLength为每次查询的起始记录和长度；
加载页面url链接-->load form-->指向分页的action-->json数据返回给页面
效果图如下：
