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

评论

1 楼 06softwaregaojie 2016-05-23  

能给个完整的例子吗，这篇文章里，很多多没有描述到 ，比如AppManager、Gson等