OK,上次完成了客户端的分页,这次我们就在上一次的Demo上进行修改,来实现服务端的分页。

js代码:

<script type="text/javascript">
$(document).ready(function() {
 $('#table_id_example').DataTable({
 "bProcessing" : false, //是否显示加载
 "sAjaxSource" : '/datatableDemo/user/json', //请求资源路径
 "serverSide": true, //开启服务器处理模式
 /*
 使用ajax,在服务端处理数据
 sSource:即是"sAjaxSource"
 aoData:要传递到服务端的参数
 fnCallback:处理返回数据的回调函数
 */
 "fnServerData": function(sSource, aoData, fnCallback){
 $.ajax( { 
 'type' : 'post', 
 "url": sSource, 
 "dataType": "json", 
 "data": { "aodata" : JSON.stringify(aoData) },
 "success": function(resp) { 
  fnCallback(resp);
 } 
 }); 
 }, 
 "columns" : [ 
 { data : "id" }, 
 { data : "name" }, 
 { data : "age" }, 
 ]
 });
})
</script>

开启服务器处理模式,这时我们对表格的每次操作,datatable都会帮我们向服务器发起请求获取数据,默认是用GET方式传递参数,所以我们下面加上了”fnServerData”,这样可以修改参数传递的方式为POST,那么到底给服务端发送的”aoData”是个什么鬼呢,别急,我们直接从Servlet取出来看看就知道了
此时我们的Servlet也要做一点修改:

public class Action extends HttpServlet {

 /**
 * 
 */
 private static final long serialVersionUID = 5957315496919679612L;

 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 // 编码设置
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");

 // 把传送过来的JSON字符串转成JSON数组
 JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));
 System.out.println(ja);

 // 从数据库获取数据
 List<User> listUser = Service.getInstance().getAll();

 // 数据封装并返回给客户端
 DataTableJSONResponse dtjs = new DataTableJSONResponse(listUser);
 JSONObject jsonObject = JSONObject.fromObject(dtjs);
 response.getWriter().print(jsonObject.toString());
 }

此时我们运行一下,OK,发现所谓的参数长这个模样

[{“name”:”sEcho”,”value”:1}, 
{“name”:”iColumns”,”value”:3}, 
{“name”:”sColumns”,”value”:”,,”}, 
{“name”:”iDisplayStart”,”value”:0}, 
{“name”:”iDisplayLength”,”value”:10}, 
{“name”:”mDataProp_0”,”value”:”id”}, 
{“name”:”sSearch_0”,”value”:”“}, 
{“name”:”bRegex_0”,”value”:false}, 
{“name”:”bSearchable_0”,”value”:true}, 
{“name”:”bSortable_0”,”value”:true}, 
{“name”:”mDataProp_1”,”value”:”name”}, 
{“name”:”sSearch_1”,”value”:”“}, 
{“name”:”bRegex_1”,”value”:false}, 
{“name”:”bSearchable_1”,”value”:true}, 
{“name”:”bSortable_1”,”value”:true}, 
{“name”:”mDataProp_2”,”value”:”age”}, 
{“name”:”sSearch_2”,”value”:”“}, 
{“name”:”bRegex_2”,”value”:false}, 
{“name”:”bSearchable_2”,”value”:true}, 
{“name”:”bSortable_2”,”value”:true}, 
{“name”:”sSearch”,”value”:”“}, 
{“name”:”bRegex”,”value”:false}, 
{“name”:”iSortCol_0”,”value”:0}, 
{“name”:”sSortDir_0”,”value”:”asc”}, 
{“name”:”iSortingCols”,”value”:1}]

 是不是感觉有点晦涩难懂,于是本菜上网查了下,勉强是看懂这个鬼东西,接下来就讲解一下几个我们需要的参数:
sEcho:客户端发送请求同时发送过来的一个标识,虽然有什么卵用不知道,不过我们服务端返回的数据中必须带有这个标识,哦,官网的文档里说,服务端取出标识最好转一下转成int,防止XXS攻击(懵逼,暂且不管,我们只知道需要这个就行)
iColumns:列数
iDisplayStart:起始索引
iDisplayLength:显示的行数
{“name”:”mDataProp_0”,”value”:”id”},
{“name”:”sSearch_0”,”value”:”“},
{“name”:”bRegex_0”,”value”:false},
{“name”:”bSearchable_0”,”value”:true},
{“name”:”bSortable_0”,”value”:true}

每一列的参数设置,_0即是第一列,这个我们不管,到下面也是提取列名而已
sSearch:全局搜索字段
iSortCol_0:被排序的列
sSortDir_0:排序方式

完成了参数解读,那么接下来就要提取我们的参数啦~~开工加代码

public class Action extends HttpServlet {

 /**
 * 
 */
 private static final long serialVersionUID = 5957315496919679612L;

 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 // 编码设置
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");

 // 把传送过来的JSON字符串转成JSON数组
 JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));
 System.out.println(ja);

 // 获取需要的参数值
 String sEcho = null;
 Integer iColumns = null;
 Integer iDisplayStart = null;
 Integer iDisplayLength = null;
 List<String> mDataProp = new ArrayList<String>(); //存放列名
 String sSearch = null;
 Integer iSortCol_0 = null;
 String iSortCol = null;
 String sSortDir_0 = null;
 for (int i = 0; i < ja.size(); i++) {
 if (ja.getJSONObject(i).getString("name").equals("sEcho"))
 sEcho = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iColumns"))
 iColumns = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayStart"))
 iDisplayStart = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayLength"))
 iDisplayLength = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSearch"))
 sSearch = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iSortCol_0"))
 iSortCol_0 = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSortDir_0"))
 sSortDir_0 = ja.getJSONObject(i).getString("value");
 else if (iColumns != null) {
 for (int j = 0; j < iColumns; j++)
  if (ja.getJSONObject(i).getString("name").equals("mDataProp_" + j))
  mDataProp.add(ja.getJSONObject(i).getString("value"));
 }
 }
 iSortCol = mDataProp.get(iSortCol_0);
 System.out.println(sEcho);
 System.out.println(iColumns);
 System.out.println(iDisplayStart);
 System.out.println(iDisplayLength);
 System.out.println(sSearch);
 System.out.println(iSortCol);
 System.out.println(sSortDir_0);

 // 从数据库获取数据
 List<User> listUser = Service.getInstance().getAll();

 // 数据封装并返回给客户端
 DataTableJSONResponse dtjs = new DataTableJSONResponse(listUser);
 JSONObject jsonObject = JSONObject.fromObject(dtjs);
 response.getWriter().print(jsonObject.toString());
 }

好的,加工完毕,这时我们跑一跑看看是不是打出我们要的参数,这里我就不贴出来了,你们自己跑了看,好的发现拿到了我们要的参数,那么接下来可以拼接我们的sql语句了,同时我们要对我们的DataTableJSONResponse进行一下小小的修改,因为这里对于返回的数据也是有参数要求的,那我们就把需要的参数放进去,代码如下:

public class DataTableJSONResponse {
 Object sEcho;
 Object iTotalRecords; //查询的记录数
 Object iTotalDisplayRecords; //过滤后的记录数
 Object aaData;

 public DataTableJSONResponse() {
 super();
 }

 public DataTableJSONResponse(Object aaData) {
 super();
 this.aaData = aaData;
 }

 public DataTableJSONResponse(Object sEcho, Object iTotalRecords, Object iTotalDisplayRecords, Object aaData) {
 super();
 this.sEcho = sEcho;
 this.iTotalRecords = iTotalRecords;
 this.iTotalDisplayRecords = iTotalDisplayRecords;
 this.aaData = aaData;
 }

 public Object getAaData() {
 return aaData;
 }

 public void setAaData(Object aaData) {
 this.aaData = aaData;
 }

 public Object getsEcho() {
 return sEcho;
 }

 public void setsEcho(Object sEcho) {
 this.sEcho = sEcho;
 }

 public Object getiTotalRecords() {
 return iTotalRecords;
 }

 public void setiTotalRecords(Object iTotalRecords) {
 this.iTotalRecords = iTotalRecords;
 }

 public Object getiTotalDisplayRecords() {
 return iTotalDisplayRecords;
 }

 public void setiTotalDisplayRecords(Object iTotalDisplayRecords) {
 this.iTotalDisplayRecords = iTotalDisplayRecords;
 }
}

完整的Servlet:

public class Action extends HttpServlet {

 /**
 * 
 */
 private static final long serialVersionUID = 5957315496919679612L;

 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 // 编码设置
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");

 // 把传送过来的JSON字符串转成JSON数组
 JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));

 // 获取需要的参数值
 String sEcho = null;
 Integer iColumns = null;
 Integer iDisplayStart = null;
 Integer iDisplayLength = null;
 List<String> mDataProp = new ArrayList<String>(); //存放列名
 String sSearch = null;
 Integer iSortCol_0 = null;
 String iSortCol = null;
 String sSortDir_0 = null;
 for (int i = 0; i < ja.size(); i++) {
 if (ja.getJSONObject(i).getString("name").equals("sEcho"))
 sEcho = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iColumns"))
 iColumns = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayStart"))
 iDisplayStart = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayLength"))
 iDisplayLength = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSearch"))
 sSearch = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iSortCol_0"))
 iSortCol_0 = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSortDir_0"))
 sSortDir_0 = ja.getJSONObject(i).getString("value");
 else if (iColumns != null) {
 for (int j = 0; j < iColumns; j++)
  if (ja.getJSONObject(i).getString("name").equals("mDataProp_" + j))
  mDataProp.add(ja.getJSONObject(i).getString("value"));
 }
 }
 iSortCol = mDataProp.get(iSortCol_0);

 String sql = null;
 if(sSearch.equals(""))
 sql = "select * from(select id,name,age,rownum rn from dtdemo_xxx)"
 +"where rn between " + iDisplayStart + " and " + (iDisplayStart+iDisplayLength)
 +" order by " + iSortCol + " " + sSortDir_0;
 else
 sql = "select * from(select id,name,to_char(age,999) age,rownum rn from dtdemo_xxx where id like '%"
 + sSearch +"%' or name like '%"+ sSearch +"%' or age like '%"+ sSearch +"%')"
 +"where rn between " + iDisplayStart + " and " + (iDisplayStart+iDisplayLength)
 +" order by " + iSortCol + " " + sSortDir_0;
 System.out.println(sql);

 // 从数据库获取数据
 List<User> listUser = Service.getInstance().getAll(sql);
 //获取记录数
 int size = Service.getInstance().getAll().size();

 // 数据封装并返回给客户端
 DataTableJSONResponse dtjs = new DataTableJSONResponse(sEcho,size,size,listUser);
 JSONObject jsonObject = JSONObject.fromObject(dtjs);
 response.getWriter().print(jsonObject.toString());
 }

}

至此,服务端分页完成。

精彩专题分享:jquery分页功能操作JavaScript分页功能操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持Devmax。

jquery datatable服务端分页的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. ios – UIScrollView的平滑自定义分页

    我在UIScrollView中有两个(可能更多)视图,并希望使用分页.当我尝试使用UIScrollView的默认分页选项时出现问题,因为视图具有不同的宽度,无法正确分页.所以我已经实现了一个有效的自定义分页代码.但是,当滚动较慢时,它不会按预期运行.(它回到没有动画的原始位置.)以下是我目前通过uiscrollviewdelegate进行自定义分页的方法我想要的是:是)我有的:解决方法尝试下面的自

  3. ios – 使用子视图控制器分页滚动视图

    使用分页实现水平滚动视图的最佳做法是什么,每页有一个视图控制器?由于iOS5具有用于视图控制器容器/包含的API,因此PageControl示例仍然是实现此功能的最佳方式吗?

  4. 可可触摸 – 启用预览和分页的UICollectionView

    在AppStore中显示搜索结果时,我正在尝试模仿苹果公司的功能.(参考:http://searchengineland.com/apple-app-search-shows-only-one-result-at-a-time-133818)它显示像卡中的详细应用程序信息,并且它被分页.当中间的一个活动卡片和滚动视图的分页行为仍然完整时,我被困在如何使上一张和第二张卡片显示.我已经尝试使用UICo

  5. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  6. ios – 启用了内容插入的UIScrollView分页工作很奇怪

    我创建了具有内容插入的UIScrollView.第一次,scrollView.contentOffset.x为-160.0但是奇怪的问题是当我点击scrollView(黄色区域)时,内容偏移x值将重置为0并显示为这样.我尝试过几次,但是点击滚动视图会将内容偏移量重置为0.我该如何防止这种情况?解决方法UIScrollView分页通过滚动与scrollView宽度相同的页面(在您的情况下为480个宽

  7. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  8. UIKit框架-高级控件Swift版本: 10.UIWebView方法/属性详解

    前面我们已经讲解完了UINavigationController的一些常用属性以及方法,现在让我们来看看一个关于网络的UIWebView.1.UIWebView的常用属性常用类型2.UIWebView的代理方法3.代码示范首先我们要使用storyBoard布局界面关联控件遵守代理协议自定义UIWebVIew实现代理方法在ViewDidLoad方法中实现PS:UIWebView继承与UIView,并

  9. swift+storyboard+UIImageview入门

    更新记录:该Storyboard教程由CarolineBegbie更新iOS8和Swift相关内容。Storyboard是最先在iOS5引入的一项振奋人心的特性,大幅缩减构建App用户界面所需的时间。要介绍Storyboard是什么,我打算从这张图讲起。这就是使用Storyboard的力量。Storyboard通过新的原型表项和静态表项特性,让处理表视图的工作更加轻松。Storyboard使自动布局更易用。接下来我们看一下Storyboard,点击项目浏览器中的Main.storyboard就可以在Int

  10. swift3.0-第一篇tableView

    最近这个月估计要一直设计新的项目天天开会苦不堪言啊~新的项目要用swift来写,从零开始还是很有乐趣的,简单总结了下table的使用,一起学习下吧。直接上代码了感谢观看,学以致用更感谢哦~

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部