• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery datatable服务端分页

jquery datatable服务端分页

作者:u014284922 字体:[增加 减小] 来源:互联网

u014284922 通过本文主要向大家介绍了jquery,datatable,分页等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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() {
 re



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jquery命令汇总,方便使用jquery的朋友
  • JQuery ztree 异步加载实例讲解
  • 基于jquery自定义的漂亮单选按钮RadioButton
  • 学习jquery之一
  • jquery实现点击页面计算点击次数
  • jQuery实现数秒后自动提交form的方法
  • 妙用Jquery的val()方法
  • jquery JSON的解析方式
  • Jquery使用Firefox FireBug插件调试Ajax步骤讲解
  • Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JS JQUERY实现滚动条自动滚到底的方法
    • jQuery基于json与cookie实现购物车的方法
    • jQuery实现渐变弹出层和弹出菜单的方法
    • 豆瓣网的jquery代码实例
    • jQuery EasyUI API 中文文档 可调整尺寸
    • jquery获取form表单input元素值的简单实例
    • jQuery展示表格点击变色、全选、删除
    • jquery的trigger和triggerHandler的区别示例介绍
    • jquery中change()用法实例分析
    • Jquery uploadify图片上传插件无法上传的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有