jquery表格插件datatables应用实例

jquery表格插件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 >

js部分这样写：

Javascript代码

$('#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代码

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部分是要求的格式

}

});

}

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代码

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();

}

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代码

public class JSONParam {

private String name;

private String value;

//略

}

public class JSONParam {

private String name;

private String value;

//略

}

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

Java代码

@RequestMapping(value = "/search", method = RequestMethod.POST)

@ResponseBody

public JSONResponse search(@RequestBody JSONParam[] params)

{

//略

}

@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代码

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) {

//略

}

//略

}

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代码

@RequestMapping(value = "/search", method = RequestMethod.POST)

@ResponseBody

public JSONResponse search(@RequestBody JSONParam[] params) throws IllegalAccessException, InvocationTargetException

//convertToMap定义于父类，将参数数组中的所有元素加入一个HashMap

HashMap 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"));

1.//customerService.search返回的第一个元素是满足查询条件的记录总数，

后面的是

//页面当前页需要显示的记录数据

List<Object> customerList = customerService.search(customerName, start, length);

2. Long count = (Long)customerList.get( 0 );

3.

4. //将查询结果转换为一个二维数组

5. int record = customerList.size() - 1 ;

6. String[][] data = new String[record][];

7. for ( int i= 0 ; i<record; i++) {

8. Customer customer = (Customer)customerList.get(i+ 1 );

9. JSONCustomer jsonCustomer = new JSONCustomer();

10. BeanUtils.copyProperties(jsonCustomer, customer);

11. data[i] = jsonCustomer.toArray();

12. }

13.

14. return successed( new DataTableReturnObject(count.longValue(), count.longValue(), sEcho, data));

15.}