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数据返回给页面

效果图如下：