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);\" οnclick=\"del('+a+')\">删除</a>'
			    				+ '<a href=\"javascript:void(0);\" οnclick=\"editForm('+c.statCleanRevampId+','+c.statCleanId+','
	    						+c.revampOrgan+',\''+c.statName+'\',\''+c.problemDes+'\')\">编辑</a>'
			                        + ' <a href=\"javascript:void(0);\" οnclick=\"check('+a+',1)\">审核通过</a>'
			                        + ' <a href=\"javascript:void(0);\" οnclick=\"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数据返回给页面
效果图如下：