jquery datatable服务端分页_jquery

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
， 分页
datatable
footable 服务端分页、bootstrap 服务端分页、datatables服务端分页、datatable 服务端分页、服务端分页，以便于您获取更多的相关知识。

时间： 2024-08-30 19:41:22

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

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

前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,非DataTable Search 代码 HTML代码 查询条件代码 <!-- 查询.添加.批量删除.导出.刷新 --> <div class="row-fluid"> <di

应用服务器-SlickGrid服务端分页的实现

问题描述 SlickGrid服务端分页的实现 业务数据量很大,如果采用自带的插件每次获取全部数据在页面翻页,会导致应用服务器内存溢出,是否有支持服务端分页加载数据,, 解决方案 这个你通过sql实现分页就可以了,每次只select出一页的数据 解决方案二: 前端只需要把页数,每页数量,当前最后记录的key值告诉服务端,服务端从数据库选取下一页数据给你

服务器-bootstrap table 服务的分页问题 , 求各路高手大神搭救

问题描述 bootstrap table 服务的分页问题 , 求各路高手大神搭救 服务的分页,每次翻页都会去请求服务器 , 怎么设置让已经加载的页面不在去请求服务端 解决方案 不在去请求服务端(包括缓存.数据库?)的话,那就第一次加载的数据把数据都存放在本地,然后读取就可以了.html5有离线读取本地数据的功能. 解决方案二: 一般每次翻页都要去请求服务器吗? 会造成服务器压力过大吗 ? 如果设置bootstrap table 服务端分页 ,那么每次翻页都要请求服务器 , 如果又想服务的分页 又

jquery如何把数组变为字符串传到服务端并处理_jquery

jquery把数组变为字符串然后在传到服务端(jquery把数组转换成字符串后,格式如1,2,3,速度,rewr) 复制代码 代码如下: define(function(require, exports, module) { var Notify = require('common/bootstrap-notify'); module.exports = function($element) { $element.on('click', '[data-role=batch-delete]', f

JQuery以JSON方式提交数据到服务端示例代码_jquery

JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多.以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式.地址.数据类型,以及回调方法等.下面的代码演示了如何将客户端表单数据封装成JSON格式,然后通过JQuery的Ajax请求将数据发送到服务端,并最终将数据存储到数据库中.服务端定义为一个.ashx文件,事实上你可以将服务端定义为任何能接收并处理客户端数据的类型,如Web Service,ASP.NET Page,Handler等. 首

服务端 JScript 记录集分页函数/对象 By shawl.qiu

js|jscript|对象|分页|函数|记录集 服务端 JScript 记录集分页函数/对象 By shawl.qiu 说明:分页其实很简单的, 我都写了好几个分页函数了... 感觉 JScript 写代码比 VBScript 方便不少, 基本恋上用 类C 语法写代码, BASIC 语法快看不懂了.... 唉, 没啥好说的, 这次用 JScript 写了两个分页程序, 一个是 Jscript 对象, 一个是Jscript 函数对象, 我比较喜欢 Jscript 对象, 不需要像函数对象那样 ne

如何借助Nodejs在服务端使用jQuery采集17173游戏

今天在园子里看到一篇文章: 借助Nodejs在服务端使用jQuery采集17173游戏排行信息 感觉用SS来实现相同功能更加简洁, 于是写了一下, 发现25行代码就搞定了 (包括自动翻页), 于 是跟大家分享分享. 脚本: public void Run() { Default.Navigate("http://top.17173.com/index-0-0-0-0-0-0-0.html"); Default.Ready(); while(Default.Available) { va

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据_AJAX相关

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

jQuery实现瀑布流布局详解（PC和移动端）_jquery

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我们用百度图片作为范例:   这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里.而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似. 动手 首先我们将如