jquery datatable服务端分页

原创 2016年08月30日 16:09:28

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插件AJAX服务器分页的的学习心得

首先得先引入对应的js 1、jquery.min.js 首先导入 2、 File: jquery.dataTables.min.js Version: 1.9.4 这是我使用的版本 ...

jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的。 引用 js文件 添加一个table 标签, 可以不用...
  • KokJuis
  • KokJuis
  • 2016年12月29日 11:44
  • 9614

jquery-datatable之服务器分页

上一篇讲了jquery-datatable的基本参数配置,并且讲了一个小demo。下面讲jquery-datatable之服务器分页。 jquery-datatable的官方网站讲了很多例子,但是没...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

datatables服务器端分页查询

本文是jqueryspring(3.0)系列的第三篇。 原文地址:http://blog.csdn.net/hy840429/article/details/5626878 jquery与yu...

DataTable 服务器端动态分页

原始的dataTable显示表单:一次性查找所需的所有数据(但对于若查找的数据有上万条效率太低) 所以用服务器端动态分页:一次访问几条,多次访问后台数据 (1)在js中初始化表单      oTabl...

JQuery DataTable 结合SpringMVC+Spring Data JPA应用(二)

在上一节中配置好了DataTable的配置,接下来介绍关于后台实现分页、条件查询、排序的方法。DataTable后台分页、条件查询、排序1.DataTable参数的接收后台代码需要接收的参数有: 当前...

使用datatable后台分页

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明...

datatable分页指南--前台分页和后台分页

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

datatable 服务器端分页

table cellpading="0" cellspacing="0" border="0" class="dTable acelistTable"> thead> tr> ...
  • diqi77
  • diqi77
  • 2016年08月19日 15:24
  • 647
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery datatable服务端分页
举报原因:
原因补充:

(最多只允许输入30个字)