jquery datatable服务端分页

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分页功能操作

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

(0)

相关推荐

  • jQuery插件DataTable使用方法详解(.Net平台)

    上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable(简称DT),很好用. DT是一款前端插件,和后端完全分离开,就这点来看,我就特别喜欢. 一.使用DT,需要以下支持 js:jq+jquery.dataTables.min.js  二.页面上进行引入js,直接使用DT功能 前端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

  • jquery dataTable 获取某行数据

    DataTable API table.row(rowSelector [,modifier]) 注table是dataTable的对象 该方法有两个默认参数 第一个是选择器 第二个是可选的 请注意,如果选择器匹配多个行,则此方法将截断结果以仅包含一行,即第一个匹配的行.如果没有参数返回第一行. 读取数据时用 table.row(rowSelector [,modifier]).data()即可 比如双击获取行数据 var table = $('#example').DataTable(); $

  • jQuery Datatable 多个查询条件自定义提交事件(推荐)

    先写2个input 分别表示开始时间跟结束时间 在写一个button 点击按钮 让表格重新刷新 代码如下 如下所示在datatable设置项增加如下设置  如果已经有了  只需要添加如下的data选项 ajax: { url: '/admin/index', type: 'POST', "data": function ( d ) { //添加额外的参数传给服务器 d.beginDate = $("#datetimepicker1").val(); d.endDat

  • 利用JQuery实现datatables插件的增加和删除行功能

    在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8" /> <script src=&quo

  • jquery表格datatables实例解析 直接加载和延迟加载

    参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选), 由于时间紧,省略了很多,所以总结份简化版的仅供参考. 1.直接加载,这个比较简单,如下 <div id="tid" class="col-sm-12 col-md-12"> <div id="secondtid" hidden="hidden"></div

  • jQuery.datatables.js插件用法及api实例详解

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

  • jQuery使用DataTable实现删除数据后重新加载功能

    问题描述: 利用jQuery Datatable和artTemplate组合来做的表格.但是当删除数据时,需要重新加载table里的数据.但是问题是datatable并没有直接的重新渲染,反而给数据累加上了. 解决办法: 经过查看高人的blog,发现可以先销毁table,然后再重新渲染. var dttable; App.globalAjax("get", "/Order/MyJsonList", {}, function (result) { var html =

  • jQuery插件dataTables添加序号列的方法

    官网方法实例: $(document).ready(function() { var t = $('#example').DataTable({ "columnDefs": [{ "searchable": false, "orderable": false, "targets": 0 }], "order": [[1, 'asc']] }); t.on('order.dt search.dt', func

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

  • jquery datatable服务端分页

    OK,上次完成了客户端的分页,这次我们就在上一次的Demo上进行修改,来实现服务端的分页~ js代码: <script type="text/javascript"> $(document).ready(function() { $('#table_id_example').DataTable({ "bProcessing" : false, //是否显示加载 "sAjaxSource" : '/datatableDemo/user/

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

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

  • ThinkPHP整合datatables实现服务端分页的示例代码

    最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php(使用thinkphp) 页面样式来自于H-ui框架(datatables版本为1.10.0) 主要修改(databases)配置项为: 1) bProcessing:true 使用ajax源 2) serverSide:true 使用服务端分页 3) createdRow:functi

  • ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI. Ama

  • datatables 带查询条件java服务端分页处理实例

    使用datatables自带后台查询 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" rel="external nof

  • bootstrap table服务端实现分页效果

    实现bootstrap table服务端实现分页demo,具体内容如下 首页index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-wi

  • jQuery Ajax向服务端传递数组参数值的实例代码

    在使用MVC时,向服务器端发送POST请求时有时需要传递数组作为参数值 下面使用例子说明,首先看一下Action [HttpPost] public ActionResult Test(List<string> model) { return Json(null, JsonRequestBehavior.AllowGet); } 方式一,构造表单元素,然后调用serialize()方法得到构造参数字符串 @{ Layout = null; } <!DOCTYPE html> <

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

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

  • bootstrap Table服务端处理分页(后台是.net)

    本文实例为大家分享了bootstrap Table服务端处理分页的具体代码,供大家参考,具体内容如下 要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType: "json", striped: true,//设置为 true 会有隔行变色效果 undefinedText: "空",//当数据为 undefined 时显示的

  • 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

随机推荐