datatables的服务器分页

datatables是jquery的一个插件,但是很是强大,有查询,排序功能,而且很漂亮,最重要的是他自带 了一个分页功能,很是强大

datatables的分页形式有2种:

一种是前台分页,这种方式简单,但是大数据量的时候就是一个问题了;

第二种是服务器端分页,当dataables需要数据的时候会自动的发出请求

前台分页我已经会了,今天准备尝试下服务器端分页.查看了很多资料,发现写的都是前台的js代码

而后台的代码网上的帖子里面都没有涉及到.如果有的话也是取得前台的参数后怎么操作,然而这些肯定都不用说很明白的,取数据不是很麻烦.

但是里面最关键的一步就是前后台的连接部分缺没有涉及到,如果是简单的数据格式的话当然使用request.getParameter("XXX")就可以很简单的获得了.但是当你写前台JS 的时候就会发现前台传递的数据不是简单的name-value格式的数据,二是一个JSONARRAY,这个数据怎么在后台转换成我们可以直接取的数据是一个难点(我使用json不久,不怎么会操作......)

今天我就把我的解析数据的方法记录下来

首先是前台

datatables的配置我就不介绍了,网上一大堆.我只说几个重要的参数

"bServerSide": true,                    //指定从服务器端获取数据
"sAjaxSource": surl,             //获取数据的url (一般是action)
"fnServerData": retrieveData,           //获取数据的处理函数

这三个参数我就不一一介绍了,看注释.这三个参数是服务器端分页的必须参数.其中"fnServerData"是调用一个function来实现的,当然你也可以直接写在这里

"fnServerData":function(){.............},

我的fnServerData代码如下:

function retrieveData( sSource, aoData, fnCallback ) {
// 将客户名称加入参数数组
//aoData.push( { "name": "customerName", "value": "asdas" } );//添加自己的额外参数
alert(aoData[0].name);
alert(JSON.stringify(aoData));
$.ajax( {
"type": "get",
"contentType": "application/json",
"url": sSource,
"dataType": "json",
"data": { aoData: JSON.stringify(aoData) }, // 以json格式传递
"success": function(resp) {
fnCallback(resp.aaData);
}
});
}

这里我说明一个情况,我一开始的时候是使用"POST"方法来提交的,但是发现在后台怎么就是无法获取"aoData",一直是null.而采用"get"的时候就是OK 的,哪位能不能解释下!!!!小弟感激不尽阿!

里面的JSON.stringify是js自带的能够把支付传转换成json对象的方法.这里不必在意.

比如我直接alert(doData);的话,输出的数据如下:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

然而我alert(JSON.stringify(aoData));输出数据如下:

[{"name":"sEcho","value":1},{"name":"iColumns","value":4},{"name":"sColumns","value":""},{"name":"iDisplayStart","value":0},{"name":"iDisplayLength","value":50},{"name":"mDataProp_0","value":0},{"name":"mDataProp_1","value":1},{"name":"mDataProp_2","value":2},{"name":"mDataProp_3","value":3},{"name":"iSortCol_0","value":0},{"name":"sSortDir_0","value":"asc"},{"name":"iSortingCols","value":1},{"name":"bSortable_0","value":true},{"name":"bSortable_1","value":true},{"name":"bSortable_2","value":false},{"name":"bSortable_3","value":false}]

这个就是datatables传递给后台的数据.

前台的处理就写到这里,接下来看后台action里面的操作:

我导入的JSON包是如下2个:

import org.json.JSONArray;
import org.json.JSONObject;

public ActionForward getDataNoVerify(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)throws Exception {
AppManager appmanager=(AppManager) getBean(AppManager.class.getName());
String jsondata=request.getParameter("aoData");
response.setCharacterEncoding("UTF-8");
PrintWriter out = null;
String json = null; // 返回的json数据
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
JSONArray jsonarray=new JSONArray(jsondata);
for(int i=0;i<jsonarray.length();i++) //从传递参数里面选出待用的参数
{
JSONObject obj=(JSONObject)jsonarray.get(i);
if(obj.get("name").equals("sEcho"))
sEcho=obj.get("value").toString();
if(obj.get("name").equals("iDisplayStart"))
iDisplayStart=obj.get("value").toString();
if(obj.get("name").equals("iDisplayLength"))
iDisplayLength=obj.get("value").toString();
//System.out.println("name:"+obj.get("name")+";value:"+obj.get("value"));
}
List<App> list=appmanager.getByVerify(1, Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength)); //调用service获取数据
int count=appmanager.count(1);
json=tojson(list,count);
System.out.println("json:"+json);
out.println(new JSONObject(json));
return null;
}

/**
* 进行返回数据前的json转换
* @param list
* @return
*/
public String tojson(List<App> list,int count)
{
String json = null; // 返回的json数据
Gson gjson=new Gson();
String aaData=gjson.toJson(list);
json = "{\"sEcho\":"+sEcho+",\"iTotalRecords\":"+count+",\"iTotalDisplayRecords\":"+count+",\"aaData\":"+aaData+"}";
return json;
}

特别注意的是里面的iTotalRecords和iTotalDisplayRecords是整数,不要写成

json = "{\"sEcho\":"+sEcho+",\"iTotalRecords\":\""+count+"\",\"iTotalDisplayRecords\":\""+count+"\",\"aaData\":"+aaData+"}";

参考文献有如下:
http://small-ant.iteye.com/blog/1513171 http://topic.csdn.net/u/20110803/18/5e3893ff-e2e3-49fe-86f5-5f4fb3c807d0.html