`
yiyu
  • 浏览: 187084 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery<--json-->spring(3.0)之DataTables的服务器端翻页

    博客分类:
  • java
阅读更多
本文是jquery<--json-->spring(3.0)系列的第三篇。

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

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

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




1 页面部分
使用DataTables时,html需要如下书写,其中tfoot部分是表表格的下部标题,可以不
要。
<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部分这样写:
$('#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如下所示:
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部分是要求的格式
		}
	});
}


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

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对,我如下定义
public class JSONParam {
	private String name;
	private String value;
	
	//略
}

对应的处理函数如下定义:
@RequestMapping(value = "/search", method = RequestMethod.POST)
@ResponseBody
public JSONResponse search(@RequestBody JSONParam[] params){
	//略
}

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

对应的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) {
		//略
	}
	
	//略
}


完整的服务器端处理函数如下:
@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还有很多功能,例如排序,过滤等等,关于这些可以参看它的主页。
  • 大小: 72.9 KB
分享到:
评论
13 楼 aa00aa00 2013-06-10  
这个东西不错,我们项目就用的这个技术,挺方便的.
12 楼 yiyu 2011-03-15  
cooljack2009 写道
http://trirand.com/blog/jqgrid/jqgrid.html jgrid 挺好用的


谢谢了,确实不错
11 楼 yiyu 2011-03-15  
chinahnzhou 写道
borge 写道
楼主 把 需要的jar包 列出来................


对不起,时间太久了,那个project已经找不到,不知道用了哪些jar了
试着运行一下,报告缺哪些类,就加哪些包吧
10 楼 cooljack2009 2011-03-15  
http://trirand.com/blog/jqgrid/jqgrid.html jgrid 挺好用的
9 楼 chinahnzhou 2011-03-15  
borge 写道
楼主 把 需要的jar包 列出来................

8 楼 liwei 2011-02-28  
public JSONResponse search(@RequestBody JSONParam[] params) throws IllegalAccessException, InvocationTargetException   

JSONParam[] params这个参数数组的数据是什么时候set的
7 楼 borge 2010-12-14  
楼主 把 需要的jar包 列出来................
6 楼 txlaijava 2010-05-18  
学习了. 感谢分享.
5 楼 yiyu 2010-05-18  
hesy_007 写道
其实和服务端没多大关系,只要返回的数据格式符合要求就行了。所以这个“spring(3.0)”个人感觉可以去掉


hesy_007说的对,我这里的spring(3.0)是因为最近我在学习jquery+spring3,写的几个总结,所以就都带个spring(3.0)
4 楼 hesy_007 2010-05-18  
其实和服务端没多大关系,只要返回的数据格式符合要求就行了。所以这个“spring(3.0)”个人感觉可以去掉
3 楼 whaosoft 2010-05-17  
这个非要结合spring用吗 有不用spring 实现的吗?
2 楼 pn2008 2010-05-17  
学习了 O(∩_∩)O~
1 楼 yiyu 2010-05-15  
代码在这里

相关推荐

    ssm整合datatables实例Demo

    在SSM环境中,Datatables通过Ajax请求从服务器获取数据,服务器端则使用SpringMVC来处理这些请求,MyBatis执行对应的SQL查询,最后将结果集转化为JSON格式返回给前端。 在本实例中,`readme.htm`可能包含项目的介绍...

    DataTables很好用的数据表格工具

    - 数据源:DataTables可以与服务器端交互获取数据,也可以直接使用静态数据。对于动态数据,通常使用Ajax进行异步加载。 3. **与后端技术的结合**: - Java:在Java环境中,开发者可以使用诸如Spring MVC、Struts...

    Jquery dataTable后台获取数据示例

    **jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...

    jquery dataTable 后台加载数据并分页实例代码

    DataTablesRequest&lt;YourEntity&gt; request = new DataTablesRequest&lt;&gt;(start, length, search); DataTablesResponse&lt;YourEntity&gt; response = yourService.getData(request); return response; } ``` 在这个例子中...

    spring4 MVC +maven + mysql数据库 + mybatis+根据后台json前台动态生成table

    在本项目中,我们主要探讨的是如何利用Spring4 MVC、Maven、MySQL数据库、MyBatis框架以及前端JSON数据来动态生成表格。这是一个常见的Web应用开发模式,它可以帮助开发者快速构建数据驱动的Web应用程序。 首先,...

    datatables render与日期转换(moment.js)

    在`SpringMVC_datatables_moment` 这个项目中,很可能使用Spring MVC作为后端框架,提供JSON数据给前端的DataTables。在Spring MVC中,你可以将日期转换为符合JSON标准的格式,如ISO 8601,然后在前端使用`moment.js...

    dataTables java后台解析http请求参数demo

    而J2EE(Java 2 Platform, Enterprise Edition)是一个企业级的Java开发框架,用于构建服务器端应用。 首先,我们需要理解DataTable的请求模式。当用户在前端进行分页、排序或过滤操作时,DataTable会自动发起Ajax...

    基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    服务端分页是在服务器端进行数据的分页处理,而不是在客户端。这样可以避免一次性加载大量数据导致的性能问题。在本项目中,当用户滚动表格或更改每页显示条数时,DataTables会向服务器发送包含当前页码和每页大小...

    datatables 带查询条件java服务端分页处理实例

    /datatables 是一个非常流行的基于 jQuery 的 DataTables 插件,它提供了许多实用的功能,如排序、过滤、分页等,今天我们将介绍如何使用 DataTables 实现带查询条件的 Java 服务端分页处理实例。 首先,让我们了解...

    js-table分页

    - **后端分页**:在Java后端,可以使用Spring Data JPA的Pageable接口或者MyBatis的分页插件来实现服务器端的分页,返回指定页的数据到前端。 - **RESTful API设计**:设计符合REST原则的API,如`/api/data?page=1...

    犀利开发 jQuery内核详解与实践 下载

    尽管标题中提及的是jQuery,但"java"这个标签可能意味着书中也可能涉及了与Java相关的Web开发内容,如Servlet、JSP或Spring等框架与jQuery的集成。 jQuery的核心概念包括选择器、DOM操作、事件处理、动画效果以及...

    软件开发工程师简历模板

    理解Spring的IOC和AOP思想,熟练操作Oracle、MySQL、Sqlserver、SQLite等多种数据库,熟悉J2EE相关技术,如JSP、Servlet、JDBC、JSTL,熟练使用前端技术如HTML、JavaScript、jQuery、Ajax、XML、JSON、Datatables、...

    xms:Spring MVC 快速开发脚手架

    1、Spring MVC 2、mybatis (mybatis-generator) 3、shiro 4、fastjson (json 处理) 5、淘宝客SDK 6、等.. 前端 1、Bootstrap 2、JQuery 3、fancybox 4、datatables 5、other... Module说明 1、core: 通用类库 2...

    jQuery_API.rar_JavaScript/JQuery_Java_

    在这种情况下,通常使用Servlet、JSP或Spring MVC等Java框架处理服务器端逻辑,并通过jQuery的AJAX方法进行前后端通信,实现动态页面更新和数据交换。 **jQuery_API.mxp文件** `jQuery_API.mxp`是一个Dreamweaver...

    inspinia_admin-v2.8.zip

    6. **表格组件**:Inspinia Admin包含数据表格,支持排序、过滤、分页等功能,可与服务器端进行数据通信,如使用DataTables插件,提供高效的表格管理。 7. **页面示例**:在压缩包中,包括了登录、注册、锁屏、错误...

    学生信息管理系统

    JSON库则用于前后端数据交换,使得数据传输更加简洁高效。Spring框架则可以简化依赖注入和事务管理,进一步提高代码的可读性和可测试性。 总的来说,学生信息管理系统是一个集成了多种技术的综合性项目,它利用...

    java分页控件.rar

    4. **Java脚本库**:例如,jQuery的Datatables插件,可以在前端实现分页效果,减轻服务器压力。后端只需提供JSON格式的数据即可。 5. **NoSQL数据库的分页**:对于使用MongoDB等NoSQL数据库的项目,分页方式可能...

    Advanced Table Example(表单搜索利器)

    5. **后端开发**:后端负责处理数据和业务逻辑,可能使用了Node.js、Python(Django或Flask)、Java(Spring Boot)或PHP(Laravel)等服务器端语言。数据库如MySQL、PostgreSQL或MongoDB用于存储和检索数据。 6. **...

    blog-ssm:JavaWeb博客系统,采用SSM框架,Thymeleaf模板引擎

    技术栈Spring + SpringMVC + MyBatis + Thymeleaf + JQuery + Js + Ajax + Json + PageHelper前端组件:AdminLTE + datetimepicker + Chart.js + DataTables + Editor.md + SweetAlert2 + tocbot + icheck + Prism +...

    SpringMVC+Nutz框架介绍.docx

    前端技术主要包括Jquery、Bootstrap和Pjax,提供了响应式布局和页面局部刷新的能力。框架还支持API Token机制,使用Jwt实现token验证,提供了一套完整的后台管理界面,包括单位、角色、用户、菜单等权限体系,以及...

Global site tag (gtag.js) - Google Analytics