jqueryspring(3.0)之DataTables的服务器端翻页

http://www.javaeye.com/topic/666942#

 

 

 

 

 

本文是jquery<--json-->spring(3.0)系列的第三篇。

jquery与yui相比，感觉写法很简洁，但也有个问题是配套的jquery ui中的页面控件
不是很全，很多要借助plugin，而这些plugin良莠不齐，选用时要自己好好挑一挑。
列表是一个常用的页面控件，我选了半天发现DataTables这款用的人比较多，就试了
试服务器端翻页功能，现总结如下。

DataTables的主页是http://www.datatables.net/

先上个这个demo的截图，设想的操作是输入客户名称，按检索后进行模糊检索进行分
页显示，每页显示8条记录。




1 页面部分
使用DataTables时，html需要如下书写，其中tfoot部分是表表格的下部标题，可以不
要。

Html代码

1. <table class="display" id="customerInfo">  
2.     <thead>  
3.         <tr>  
4.             <th>ID</th>  
5.             略   
6.             <th>身高</th>  
7.         </tr>  
8.     </thead>  
9.     <tbody>  
10.         <tr>  
11.             <td colspan="8"></td>    
12.         </tr>  
13.     </tbody>  
14.     <tfoot>  
15.         <tr>  
16.             <th>ID</th>  
17.             略   
18.             <th>身高</th>  
19.         </tr>  
20.     </tfoot>  
21. </table>  

<table class="display" id="customerInfo">
	<thead>
		<tr>
			<th>ID</th>
            略
			<th>身高</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="8"></td> 
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>ID</th>
            略
			<th>身高</th>
		</tr>
	</tfoot>
</table>

js部分这样写：

Javascript代码

1. $('#customerInfo').dataTable();  

$('#customerInfo').dataTable();

对于从服务器端取数据，还要指定几个参数：
bServerSide：true
sAjaxSource：获取数据的url

这样，在DataTables需要数据时会调用jquery的getJSON获取数据，其中url就是sAjaxSource，
同时传递一堆自定义的参数，包括需要显示的起始记录数，需要显示的记录数，列数，排序
列等等，具体可以参看这里http://www.datatables.net/usage/server-side。其中一个比较
特殊的是sEcho，这个参数需要以后原封不动地返回给页面。
由于默认是以$.getJSON发送请求，所以http命令是GET，参数是以url参数的方式传递的，我
希望以POST命令，以json方式发送请求，而且要加上客户名称这个参数，所以这里需要做些修
改。
DataTables通过fnServerData提供了这样一个接口，fnServerData是与服务器端交换数据时被
调用的函数，默认实现是如上所说的通过getJSON发送请求，然后接收特定格式的json数据（这
个在服务器端处理部分再说）。fnServerData会接到3个参数：
sSource： 接收数据的url，就是sAjaxSource中指定的地址
aoData：DataTables定义的参数，是一个数组，其中每个元素是一个name-value对，我需要
        把客户名称这个参数加进去
fnCallback：服务器返回数据后的处理函数，我需要按DataTables期望的格式传入返回数据
最后自定义的fnServerData如下所示：

Javascript代码

1. function retrieveData( sSource, aoData, fnCallback ) {   
2.     //将客户名称加入参数数组   
3.     aoData.push( { "name": "customerName", "value": $("#customerName").val() } );   
4.   
5.     $.ajax( {   
6.         "type": "POST",    
7.         "contentType": "application/json",   
8.         "url": sSource,    
9.         "dataType": "json",   
10.         "data": JSON.stringify(aoData), //以json格式传递   
11.         "success": function(resp) {   
12.             fnCallback(resp.returnObject); //服务器端返回的对象的returnObject部分是要求的格式   
13.         }   
14.     });   
15. }  

function retrieveData( sSource, aoData, fnCallback ) {
    //将客户名称加入参数数组
	aoData.push( { "name": "customerName", "value": $("#customerName").val() } );

	$.ajax( {
		"type": "POST", 
		"contentType": "application/json",
		"url": sSource, 
		"dataType": "json",
		"data": JSON.stringify(aoData), //以json格式传递
		"success": function(resp) {
			fnCallback(resp.returnObject); //服务器端返回的对象的returnObject部分是要求的格式
		}
	});
}

页面的初始化及查询按钮的处理函数如下所示：

Javascript代码

1. var oTable = null;   
2.   
3. $(function() {   
4.     $("#customerInfo").hide();   
5. } );   
6.   
7. //“检索”按钮的处理函数   
8. function search() {   
9.     if (oTable == null) { //仅第一次检索时初始化Datatable   
10.         $("#customerInfo").show();   
11.         oTable = $('#customerInfo').dataTable( {   
12.             "bAutoWidth": false,                    //不自动计算列宽度   
13.             "aoColumns": [                          //设定各列宽度   
14.                             {"sWidth": "15px"},   
15.                             {"sWidth": "80px"},   
16.                             {"sWidth": "160px"},   
17.                             {"sWidth": "110px"},   
18.                             {"sWidth": "120px"},   
19.                             {"sWidth": "140px"},   
20.                             {"sWidth": "140px"},   
21.                             {"sWidth": "*"}   
22.                         ],   
23.             "bProcessing": true,                    //加载数据时显示正在加载信息   
24.             "bServerSide": true,                    //指定从服务器端获取数据   
25.             "bFilter": false,                       //不使用过滤功能   
26.             "bLengthChange": false,                 //用户不可改变每页显示数量   
27.             "iDisplayLength": 8,                    //每页显示8条数据   
28.             "sAjaxSource": "customerInfo/search.do",//获取数据的url   
29.             "fnServerData": retrieveData,           //获取数据的处理函数   
30.             "sPaginationType": "full_numbers",      //翻页界面类型   
31.             "oLanguage": {                          //汉化   
32.                 "sLengthMenu": "每页显示 _MENU_ 条记录",   
33.                 "sZeroRecords": "没有检索到数据",   
34.                 "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",   
35.                 "sInfoEmtpy": "没有数据",   
36.                 "sProcessing": "正在加载数据...",   
37.                 "oPaginate": {   
38.                     "sFirst": "首页",   
39.                     "sPrevious": "前页",   
40.                     "sNext": "后页",   
41.                     "sLast": "尾页"  
42.                 }   
43.             }   
44.         });   
45.     }   
46.   
47.     //刷新Datatable，会自动激发retrieveData   
48.     oTable.fnDraw();   
49. }  

var oTable = null;

$(function() {
	$("#customerInfo").hide();
} );

//“检索”按钮的处理函数
function search() {
	if (oTable == null) { //仅第一次检索时初始化Datatable
		$("#customerInfo").show();
		oTable = $('#customerInfo').dataTable( {
			"bAutoWidth": false,					//不自动计算列宽度
			"aoColumns": [							//设定各列宽度
							{"sWidth": "15px"},
							{"sWidth": "80px"},
							{"sWidth": "160px"},
							{"sWidth": "110px"},
							{"sWidth": "120px"},
							{"sWidth": "140px"},
							{"sWidth": "140px"},
							{"sWidth": "*"}
						],
			"bProcessing": true,					//加载数据时显示正在加载信息
			"bServerSide": true,					//指定从服务器端获取数据
			"bFilter": false,						//不使用过滤功能
			"bLengthChange": false,					//用户不可改变每页显示数量
			"iDisplayLength": 8,					//每页显示8条数据
			"sAjaxSource": "customerInfo/search.do",//获取数据的url
			"fnServerData": retrieveData,			//获取数据的处理函数
			"sPaginationType": "full_numbers",		//翻页界面类型
			"oLanguage": {							//汉化
				"sLengthMenu": "每页显示 _MENU_ 条记录",
				"sZeroRecords": "没有检索到数据",
				"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
				"sInfoEmtpy": "没有数据",
				"sProcessing": "正在加载数据...",
				"oPaginate": {
					"sFirst": "首页",
					"sPrevious": "前页",
					"sNext": "后页",
					"sLast": "尾页"
				}
			}
		});
	}

	//刷新Datatable，会自动激发retrieveData
	oTable.fnDraw();
}

2 服务器端
页面请求的参数是一个数组，其中每个元素是一个name-value对，我如下定义

Java代码

1. public class JSONParam {   
2.     private String name;   
3.     private String value;   
4.        
5.     //略   
6. }  

public class JSONParam {
	private String name;
	private String value;
	
	//略
}

对应的处理函数如下定义：

Java代码

1. @RequestMapping(value = "/search", method = RequestMethod.POST)   
2. @ResponseBody  
3. public JSONResponse search(@RequestBody JSONParam[] params){   
4.     //略   
5. }  

@RequestMapping(value = "/search", method = RequestMethod.POST)
@ResponseBody
public JSONResponse search(@RequestBody JSONParam[] params){
	//略
}

在这个函数里大致的处理是先取出所需的参数，然后检索数据，最后将DataTables期望的
格式的数据放入返回对象JSONResponse的returnObject部分。
DataTables期望的数据格式如下：
{
    "sEcho": 页面发来的参数，原样返回,
    "iTotalRecords": 过滤前总记录数,
    "iTotalDisplayRecords": 过滤后总记录数，我没有使用过滤，不太清楚和iTotalRecords的区别,
    "aaData": 包含数据的2维数组
}

对应的java定义如下：

Java代码

1. public class DataTableReturnObject {   
2.     private long iTotalRecords;   
3.     private long iTotalDisplayRecords;   
4.     private String sEcho;   
5.     private String[][] aaData;   
6.        
7.     public DataTableReturnObject(long totalRecords, long totalDisplayRecords, String echo, String[][] d) {   
8.         //略   
9.     }   
10.        
11.     //略   
12. }  

public class DataTableReturnObject {
	private long iTotalRecords;
	private long iTotalDisplayRecords;
	private String sEcho;
	private String[][] aaData;
	
	public DataTableReturnObject(long totalRecords, long totalDisplayRecords, String echo, String[][] d) {
		//略
	}
	
	//略
}

完整的服务器端处理函数如下：

Java代码

1. @RequestMapping(value = "/search", method = RequestMethod.POST)   
2. @ResponseBody  
3. public JSONResponse search(@RequestBody JSONParam[] params) throws IllegalAccessException, InvocationTargetException    
4.     //convertToMap定义于父类，将参数数组中的所有元素加入一个HashMap   
5.     HashMap<String, String> paramMap = convertToMap(params);   
6.     String sEcho = paramMap.get("sEcho");   
7.     String customerName = paramMap.get("customerName");   
8.     int start = Integer.parseInt(paramMap.get("iDisplayStart"));   
9.     int length = Integer.parseInt(paramMap.get("iDisplayLength"));   
10.        
11.     //customerService.search返回的第一个元素是满足查询条件的记录总数，后面的是   
12.     //页面当前页需要显示的记录数据   
13.     List<Object> customerList = customerService.search(customerName, start, length);   
14.     Long count = (Long)customerList.get(0);   
15.        
16.     //将查询结果转换为一个二维数组   
17.     int record = customerList.size() - 1;   
18.     String[][] data = new String[record][];   
19.     for(int i=0; i<record; i++) {   
20.         Customer customer = (Customer)customerList.get(i+1);   
21.         JSONCustomer jsonCustomer = new JSONCustomer();   
22.         BeanUtils.copyProperties(jsonCustomer, customer);   
23.         data[i] = jsonCustomer.toArray();   
24.     }   
25.        
26.     return successed(new DataTableReturnObject(count.longValue(), count.longValue(), sEcho, data));   
27. }  

@RequestMapping(value = "/search", method = RequestMethod.POST)
@ResponseBody
public JSONResponse search(@RequestBody JSONParam[] params) throws IllegalAccessException, InvocationTargetException 
	//convertToMap定义于父类，将参数数组中的所有元素加入一个HashMap
	HashMap<String, String> paramMap = convertToMap(params);
	String sEcho = paramMap.get("sEcho");
	String customerName = paramMap.get("customerName");
	int start = Integer.parseInt(paramMap.get("iDisplayStart"));
	int length = Integer.parseInt(paramMap.get("iDisplayLength"));
	
	//customerService.search返回的第一个元素是满足查询条件的记录总数，后面的是
	//页面当前页需要显示的记录数据
	List<Object> customerList = customerService.search(customerName, start, length);
	Long count = (Long)customerList.get(0);
	
	//将查询结果转换为一个二维数组
	int record = customerList.size() - 1;
	String[][] data = new String[record][];
	for(int i=0; i<record; i++) {
		Customer customer = (Customer)customerList.get(i+1);
		JSONCustomer jsonCustomer = new JSONCustomer();
		BeanUtils.copyProperties(jsonCustomer, customer);
		data[i] = jsonCustomer.toArray();
	}
	
	return successed(new DataTableReturnObject(count.longValue(), count.longValue(), sEcho, data));
}

数据返回到页面后，如上所述，取出response中的returnObject交给DataTables的函数进行处理
就可以了

DataTables还有很多功能，例如排序，过滤等等，关于这些可以参看它的主页。