本文是jquery<--json-->spring(3.0)系列的第三篇。
原文地址:http://blog.csdn.net/hy840429/article/details/5626878
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),
-
"success": function(resp) {
-
fnCallback(resp.returnObject);
- }
- });
- }
页面的初始化及查询按钮的处理函数如下所示:
- var oTable = null;
-
-
$(function() {
-
$("#customerInfo").hide();
- } );
-
-
-
function search() {
-
if (oTable == null) {
-
$("#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,
-
"sAjaxSource": "customerInfo/search.do",
-
"fnServerData": retrieveData,
-
"sPaginationType": "full_numbers",
-
"oLanguage": {
-
"sLengthMenu": "每页显示 _MENU_ 条记录",
-
"sZeroRecords": "没有检索到数据",
-
"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据;总共有 _TOTAL_ 条记录",
-
"sInfoEmtpy": "没有数据",
-
"sProcessing": "正在加载数据...",
-
"oPaginate": {
-
"sFirst": "首页",
-
"sPrevious": "前页",
-
"sNext": "后页",
-
"sLast": "尾页"
- }
- }
- });
- }
-
-
- 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
-
- 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"));
-
-
-
- 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的函数进行处理
就可以了
分享到:
相关推荐
WIP:Laravel DataTables资产DataTables服务器端和客户端脚本的个人集合。 注意:脚本依赖于bootstrap 4样式。 使用风险自负。 :)安装yarn add https://github.com/yajra/laravel-datatables-assets 按钮资产require...
codeigniter-datatables, PHP sql server服务器端的jQuery数据表 datatablesPHP sql server服务器端的jQuery数据表这里代码被设计用于在使用Codeigniter时,用于流行的jQuery datatable插件的服务器端部分。...
最近看了下datatables,模仿写了一个小例子,和大家分享一下。效果图如下 (此图片来源于网络,如有侵权,请联系删除! ) jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>...
从dataTables网站下载的导出扩展功能cav,pdf,excel等多个功能,非常方便使用,留个备份。
实验室-数据表-vraptor 如果您对如何使用此测试项目有疑问,可以在我的博客中找到更多信息:
jQuery Datatables服务器端处理 ASP NET组件,为著名的jQuery表插件添加了自动服务器端处理功能。 它使用IQueryable接口来构造查询表达式到您的数据集合,可以由诸如实体框架的ORM处理。 支持: 分页; 搜索; ...
DRF数据表示例服务器端此版本为django <2> 2.0,请参考DataTables示例(服务器端)-Python Django REST框架-建议看影片的demo说明DataTables(服务器端)搭配简单范例 :memo:特色使用建立API。搭配使用增加用户体验...
datatables 插件
Laravel开发-datatables Laravel4的数据表jquery插件的服务器端处理程序
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
Flask&peewee与DataTables服务器端处理的集成由于是用于处理和显示数据的功能强大且有用JavaScript库,因此我们打算将客户端DataTables脚本与基于Flask和peewee的服务器端处理进行peewee 。安装笔记正如我们所注意...
本篇文章主要介绍了使用vue和datatables进行表格的服务器端分页实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
jquery-datatables1.10-mvc5-服务器端 JQUERY DATATABLES 1.10+和ASP.NET MVC 5服务器端 Datatables是jQuery Javascript库的高度灵活的插件。 数据表将高级交互控件(如分页,搜索和多列排序)添加到任何HTML表中。 ...
用于dataTables 使用dataTables添加行辅助按钮如 修改/删除.
jquery.datatables,异步请求后台数据时,调用api动态合并行。
ssm整合datatables实例Demo,springMVC spring mybatis datatables
解决datatables出现FixedHeader 2 is not supported with DataTables' scrolling mode at this time的问题