datatables是jquery的一个插件,但是很是强大,有查询,排序功能,而且很漂亮,最重要的是他自带 了一个分页功能,很是强大
datatables的分页形式有2种:
一种是前台分页,这种方式简单,但是大数据量的时候就是一个问题了;
第二种是服务器端分页,当dataables需要数据的时候会自动的发出请求
前台分页我已经会了,今天准备尝试下服务器端分页.查看了很多资料,发现写的都是前台的js代码
而后台的代码网上的帖子里面都没有涉及到.如果有的话也是取得前台的参数后怎么操作,然而这些肯定都不用说很明白的,取数据不是很麻烦.
但是里面最关键的一步就是前后台的连接部分缺没有涉及到,如果是简单的数据格式的话当然使用request.getParameter("XXX")就可以很简单的获得了.但是当你写前台JS 的时候就会发现前台传递的数据不是简单的name-value格式的数据,二是一个JSONARRAY,这个数据怎么在后台转换成我们可以直接取的数据是一个难点(我使用json不久,不怎么会操作......)
今天我就把我的解析数据的方法记录下来
首先是前台
datatables的配置我就不介绍了,网上一大堆.我只说几个重要的参数
"bServerSide": true, //指定从服务器端获取数据
"sAjaxSource": surl, //获取数据的url (一般是action)
"fnServerData": retrieveData, //获取数据的处理函数
这三个参数我就不一一介绍了,看注释.这三个参数是服务器端分页的必须参数.其中"fnServerData"是调用一个function来实现的,当然你也可以直接写在这里
"fnServerData":function(){.............},
我的fnServerData代码如下:
function retrieveData( sSource, aoData, fnCallback ) {
// 将客户名称加入参数数组
//aoData.push( { "name": "customerName", "value": "asdas" } );//添加自己的额外参数
alert(aoData[0].name);
alert(JSON.stringify(aoData));
$.ajax( {
"type": "get",
"contentType": "application/json",
"url": sSource,
"dataType": "json",
"data": { aoData: JSON.stringify(aoData) }, // 以json格式传递
"success": function(resp) {
fnCallback(resp.aaData);
}
});
}
这里我说明一个情况,我一开始的时候是使用"POST"方法来提交的,但是发现在后台怎么就是无法获取"aoData",一直是null.而采用"get"的时候就是OK 的,哪位能不能解释下!!!!小弟感激不尽阿!
里面的JSON.stringify是js自带的能够把支付传转换成json对象的方法.这里不必在意.
比如我直接alert(doData);的话,输出的数据如下:
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
然而我alert(JSON.stringify(aoData));输出数据如下:
[{"name":"sEcho","value":1},{"name":"iColumns","value":4},{"name":"sColumns","value":""},{"name":"iDisplayStart","value":0},{"name":"iDisplayLength","value":50},{"name":"mDataProp_0","value":0},{"name":"mDataProp_1","value":1},{"name":"mDataProp_2","value":2},{"name":"mDataProp_3","value":3},{"name":"iSortCol_0","value":0},{"name":"sSortDir_0","value":"asc"},{"name":"iSortingCols","value":1},{"name":"bSortable_0","value":true},{"name":"bSortable_1","value":true},{"name":"bSortable_2","value":false},{"name":"bSortable_3","value":false}]
这个就是datatables传递给后台的数据.
前台的处理就写到这里,接下来看后台action里面的操作:
我导入的JSON包是如下2个:
import org.json.JSONArray;
import org.json.JSONObject;
public ActionForward getDataNoVerify(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)throws Exception {
AppManager appmanager=(AppManager) getBean(AppManager.class.getName());
String jsondata=request.getParameter("aoData");
response.setCharacterEncoding("UTF-8");
PrintWriter out = null;
String json = null; // 返回的json数据
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
JSONArray jsonarray=new JSONArray(jsondata);
for(int i=0;i<jsonarray.length();i++) //从传递参数里面选出待用的参数
{
JSONObject obj=(JSONObject)jsonarray.get(i);
if(obj.get("name").equals("sEcho"))
sEcho=obj.get("value").toString();
if(obj.get("name").equals("iDisplayStart"))
iDisplayStart=obj.get("value").toString();
if(obj.get("name").equals("iDisplayLength"))
iDisplayLength=obj.get("value").toString();
//System.out.println("name:"+obj.get("name")+";value:"+obj.get("value"));
}
List<App> list=appmanager.getByVerify(1, Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength)); //调用service获取数据
int count=appmanager.count(1);
json=tojson(list,count);
System.out.println("json:"+json);
out.println(new JSONObject(json));
return null;
}
/**
* 进行返回数据前的json转换
* @param list
* @return
*/
public String tojson(List<App> list,int count)
{
String json = null; // 返回的json数据
Gson gjson=new Gson();
String aaData=gjson.toJson(list);
json = "{\"sEcho\":"+sEcho+",\"iTotalRecords\":"+count+",\"iTotalDisplayRecords\":"+count+",\"aaData\":"+aaData+"}";
return json;
}
特别注意的是里面的iTotalRecords和iTotalDisplayRecords是整数,不要写成
json = "{\"sEcho\":"+sEcho+",\"iTotalRecords\":\""+count+"\",\"iTotalDisplayRecords\":\""+count+"\",\"aaData\":"+aaData+"}";
参考文献有如下:
http://small-ant.iteye.com/blog/1513171
http://topic.csdn.net/u/20110803/18/5e3893ff-e2e3-49fe-86f5-5f4fb3c807d0.html
分享到:
相关推荐
教程的核心是利用SpringBoot、MyBatis框架与JSP、jQuery以及DataTables.js库进行数据的展示和分页。 首先,SpringBoot是一个快速开发框架,它简化了Java应用的创建、配置和部署。通过集成大量默认设置和依赖,...
标题 "datatables怎么分页" 以及描述中提到的 Datatables 是一个基于 jQuery 的...通过 Datatables 的强大功能,我们可以轻松地实现这一目标,无论是前端客户端分页还是后端服务器分页,都能得到高效、灵活的解决方案。
hibernate分页(无排序,搜索,仅仅分页显示),服务器端分页在datatables上展现,有关 datatables的知识请关注它的官网http://www.datatables.net/,datatables的功能很 全面。 2,建表的sql--studentinfo和插入...
1. **分页**:DataTables 提供了服务器端和客户端两种分页模式。服务器端分页在每次改变页码或搜索条件时向服务器发送请求,获取当前页的数据;客户端分页则将所有数据一次性加载到客户端,然后进行本地处理。这个...
datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 分页,即时搜索和排序 几乎支持任何数据源:DOM, ...
- `processing`和`serverSide`选项实现服务器端分页。 **三、SSH与Datatables结合** 1. **后端接口**:在SSH框架中,你需要创建一个服务接口,该接口将处理分页请求,获取指定范围的数据并返回。 2. **控制器处理...
1. `serverSide`:开启服务端分页,这意味着数据的检索、排序和过滤都在服务器端进行。 2. `lengthMenu`:每页默认条数,可以设置成数组,如 `[10, 25, 50, -1]`,分别表示显示10、25、50条记录,-1表示显示所有记录...
在无刷新分页中,Ajax扮演了重要角色,用户在点击分页按钮时,前端并不会完全刷新整个页面,而是仅通过Ajax发送请求到服务器,请求特定页码的数据。这样,用户可以流畅地浏览大量数据而不会感觉到页面加载的延迟。 ...
本篇文章将深入探讨如何结合Vue和DataTables实现服务器端分页的实例。 首先,我们要理解服务器端分页的概念。与客户端分页不同,服务器端分页在服务器上执行数据过滤、排序和分页逻辑,而不是在浏览器端。这样做...
**jQuery分页插件dataTables详解** jQuery分页插件dataTables是一款强大的、灵活的、功能丰富的表格增强工具,它能够将普通的HTML表格转化为具有排序、搜索、分页、过滤等高级功能的数据展示平台。dataTables插件...
它提供了丰富的交互性和定制化选项,包括排序、过滤、分页等。在“dataTables导出功能”这个主题中,我们关注的是DataTables的一个关键特性:导出功能。这个特性允许用户将表格数据导出为多种格式,如CSV、PDF或...
**jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...
- **分页**:Datatables可以自动处理大量数据,通过分页功能将数据分块显示,提高页面加载速度。 - **数据加载**:支持服务器端处理和客户端处理两种模式,可根据数据量选择合适的加载方式。 - **自定义列**:...
Datatables 提供了丰富的功能,包括排序、过滤、分页和数据的服务器端处理。它支持Ajax数据源,这意味着表格的数据可以从服务器动态加载,提高了页面性能。回调函数是Datatables的核心特性之一,允许开发者自定义...
服务器分页 自行控制和自定义遮罩效果 生成自定义效果的单元格(在线离线) 生成复选框单元格 响应复选框选择事件 生成操作按钮单元格 响应操作栏按钮点击事件 响应行点击事件 渲染回调事件(默认选中第一行) 分页...
后端分页通常是在服务器端处理分页逻辑,而前端分页则是在客户端处理,前端需要一次性获取所有数据然后自行实现分页逻辑。由于后端分页接口限制,前端无法一次性获取所有数据,因此无法直接实现前端分页。在这种情况...
在JavaScript部分,DataTables插件被初始化,并配置了`serverSide: true`,指示DataTables将处理分页、排序和搜索的任务交给服务器。`fnServerData`函数是自定义的服务端数据请求处理,它将DataTables的请求参数...
当需要添加分页功能时,我们需要理解DataTables的服务器端要求的JSON响应格式: ```json { "draw": n, // 控制请求的顺序 "recordsTotal": n, // 总记录数 "recordsFiltered": n, // 条件过滤后的记录数 "data...
在前端,DataTables提供了内置的分页功能,通过设置`pageLength`参数控制每页显示的记录数,并自动处理分页请求和响应。 5. **模糊查询** 模糊查询是指在用户输入关键词后,系统能返回包含该关键词的记录。在...