jquery表格插件datatables应用实例

转载 2011年01月21日 17:28:00

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.} 


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/ydmdzq_helloworld/archive/2010/07/06/5716232.aspx

相关文章推荐

dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/j...

jquery datatables api (转)

学习可参考:http://www.guoxk.com/node/jquery-datatables                 &...

java中jquery datatable表格的使用

这两天基于struts2的web项目需要报表排序功能,上网找了一些jquery的插件,找到了一个datatable。搞了两天,弄出个样子。但是导出功能不满足客户需求。所以暂时将该功能搁置了。自己在其中...

dataTables-动态绑定问题

问题描述:表格内容是利用Ajax动态更新的,但是$('table').dataTable();之后更新的新数据会和旧数据出现在一个表格中。 问题解决: 1 首先,要将bDestory设置为true...

dataTables-使用中遇到的问题

1 Cannot call method ’fnSetData‘ of undefined 原因:表格中有class为hidden的列,使得内容部分的列数多于表头 2Data Tables war...

datatables参数配置详解

datatables参数配置详解

PHP+Ajax+Datatables实现分页

效果如上图所示,之前对于这个插件一直都不太懂,今天写了一下很多东西都是固定的,只是里面的参数比较复杂且不易理解。建议去官方文档查看参数的意义。虽然没有看源码是如何填充的,但是从后台来看分页还是与PHP...

jquery表格插件datatables应用实例

jquery表格插件datatables应用实例 DataTables的主页是http://www.datatables.net/ 先上个这个demo的截图,设想的操作是输入客户名称,按检...

jQuery表格插件DataTables

  • 2011-11-11 00:51
  • 2.10MB
  • 下载

【转】 jQuery的表格插件datatables学习总结(一)

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。官方网站及其下载:http:/www.datatables....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)