`
810364804
  • 浏览: 846868 次
文章分类
社区版块
存档分类
最新评论

datatables的服务器分页

 
阅读更多

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

分享到:
评论
1 楼 06softwaregaojie 2016-05-23  
能给个完整的例子吗,这篇文章里,很多多没有描述到 ,比如AppManager、Gson等

相关推荐

    java初学者教程,前端jquery.datatables.js分页

    教程的核心是利用SpringBoot、MyBatis框架与JSP、jQuery以及DataTables.js库进行数据的展示和分页。 首先,SpringBoot是一个快速开发框架,它简化了Java应用的创建、配置和部署。通过集成大量默认设置和依赖,...

    datatables怎么分页

    标题 "datatables怎么分页" 以及描述中提到的 Datatables 是一个基于 jQuery 的...通过 Datatables 的强大功能,我们可以轻松地实现这一目标,无论是前端客户端分页还是后端服务器分页,都能得到高效、灵活的解决方案。

    strut2.0 + hibernate3.0 + jquery.datatables+mysql 5.0实现的 hibernate分页

    hibernate分页(无排序,搜索,仅仅分页显示),服务器端分页在datatables上展现,有关 datatables的知识请关注它的官网http://www.datatables.net/,datatables的功能很 全面。 2,建表的sql--studentinfo和插入...

    JQuery DataTables示例,包含分页、拖拽、导出

    1. **分页**:DataTables 提供了服务器端和客户端两种分页模式。服务器端分页在每次改变页码或搜索条件时向服务器发送请求,获取当前页的数据;客户端分页则将所有数据一次性加载到客户端,然后进行本地处理。这个...

    datatables+springmvc+bootstrap实现分页

    datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 分页,即时搜索和排序 几乎支持任何数据源:DOM, ...

    ssh框架搭建+datatables分页

    - `processing`和`serverSide`选项实现服务器端分页。 **三、SSH与Datatables结合** 1. **后端接口**:在SSH框架中,你需要创建一个服务接口,该接口将处理分页请求,获取指定范围的数据并返回。 2. **控制器处理...

    03 datatables分页查询1

    1. `serverSide`:开启服务端分页,这意味着数据的检索、排序和过滤都在服务器端进行。 2. `lengthMenu`:每页默认条数,可以设置成数组,如 `[10, 25, 50, -1]`,分别表示显示10、25、50条记录,-1表示显示所有记录...

    PHP+Ajax+bootstrap+dataTables无刷新分页表格插件

    在无刷新分页中,Ajax扮演了重要角色,用户在点击分页按钮时,前端并不会完全刷新整个页面,而是仅通过Ajax发送请求到服务器,请求特定页码的数据。这样,用户可以流畅地浏览大量数据而不会感觉到页面加载的延迟。 ...

    使用vue和datatables进行表格的服务器端分页实例代码

    本篇文章将深入探讨如何结合Vue和DataTables实现服务器端分页的实例。 首先,我们要理解服务器端分页的概念。与客户端分页不同,服务器端分页在服务器上执行数据过滤、排序和分页逻辑,而不是在浏览器端。这样做...

    jquery 分页插件 dataTables

    **jQuery分页插件dataTables详解** jQuery分页插件dataTables是一款强大的、灵活的、功能丰富的表格增强工具,它能够将普通的HTML表格转化为具有排序、搜索、分页、过滤等高级功能的数据展示平台。dataTables插件...

    dataTables导出功能

    它提供了丰富的交互性和定制化选项,包括排序、过滤、分页等。在“dataTables导出功能”这个主题中,我们关注的是DataTables的一个关键特性:导出功能。这个特性允许用户将表格数据导出为多种格式,如CSV、PDF或...

    jquery datatable serverside page 服务器端分页

    **jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...

    datatables

    - **分页**:Datatables可以自动处理大量数据,通过分页功能将数据分块显示,提高页面加载速度。 - **数据加载**:支持服务器端处理和客户端处理两种模式,可根据数据量选择合适的加载方式。 - **自定义列**:...

    表格 demo datatables 回调

    Datatables 提供了丰富的功能,包括排序、过滤、分页和数据的服务器端处理。它支持Ajax数据源,这意味着表格的数据可以从服务器动态加载,提高了页面性能。回调函数是Datatables的核心特性之一,允许开发者自定义...

    DataTables自行封装请求参数和返回数据的零耦合服务端分页示例(PHP&JAVA)

    服务器分页 自行控制和自定义遮罩效果 生成自定义效果的单元格(在线离线) 生成复选框单元格 响应复选框选择事件 生成操作按钮单元格 响应操作栏按钮点击事件 响应行点击事件 渲染回调事件(默认选中第一行) 分页...

    jQuery DataTables插件自定义Ajax分页实例解析

    后端分页通常是在服务器端处理分页逻辑,而前端分页则是在客户端处理,前端需要一次性获取所有数据然后自行实现分页逻辑。由于后端分页接口限制,前端无法一次性获取所有数据,因此无法直接实现前端分页。在这种情况...

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

    在JavaScript部分,DataTables插件被初始化,并配置了`serverSide: true`,指示DataTables将处理分页、排序和搜索的任务交给服务器。`fnServerData`函数是自定义的服务端数据请求处理,它将DataTables的请求参数...

    jQuery插件DataTables分页开发心得体会

    当需要添加分页功能时,我们需要理解DataTables的服务器端要求的JSON响应格式: ```json { "draw": n, // 控制请求的顺序 "recordsTotal": n, // 总记录数 "recordsFiltered": n, // 条件过滤后的记录数 "data...

    Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能

    在前端,DataTables提供了内置的分页功能,通过设置`pageLength`参数控制每页显示的记录数,并自动处理分页请求和响应。 5. **模糊查询** 模糊查询是指在用户输入关键词后,系统能返回包含该关键词的记录。在...

Global site tag (gtag.js) - Google Analytics