jquery datatable客户端分页

原创 2016年08月30日 01:12:39

由于刚学习datatable,对于分页的问题搞了挺久,毕竟我也是新人,所以也没那么熟练,记录下来一是自己总结一下,二来也希望能帮到跟我一样的新人。
1.首先我们需要一个datatable的包,这个可以直接到官网下载,然后直接Ctrl+C到WebContent下

2.HTML中引入datatable文件,这里我用的是绝对路径

<link rel="stylesheet" type="text/css" href="/datatableDemo/DataTables-1.10.12/media/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="/datatableDemo/DataTables-1.10.12/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="/datatableDemo/DataTables-1.10.12/media/js/jquery.dataTables.js"></script>

3.接下里就可以写我们程序的主体啦

<body>
    <table class="display" id="table_id_example">  
    <thead>  
        <tr>  
            <th>ID</th>  
            <th>姓名</th>  
            <th>年龄</th>
        </tr>  
    </thead>  
    <tfoot>  
        <tr>  
            <th>ID</th>  
            <th>姓名</th>  
            <th>年龄</th>
        </tr>  
    </tfoot>  
</table>  
</body>

js代码:

$(document).ready(function() {
    $('#table_id_example').DataTable({
        "bProcessing" : false, //是否显示加载
        "sAjaxSource" : '/datatableDemo/user/json', //请求资源路径
        "columns" : [ 
              { data : "id" }, 
              { data : "name" }, 
              { data : "age" }, 
        ]
    });
})

至此,前端代码完毕

4.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");

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

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

}

DataTableJSONResponse

public class DataTableJSONResponse {
    Object aaData;

    public DataTableJSONResponse() {
        super();
    }

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

    public Object getAaData() {
        return aaData;
    }

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

这其实就是一个pojo,这样做的原因是datatable使用在JSON方式返回的数据中,需要一个名为aaData的属性来提供实际的数据。

至此,客户端分页完毕~

效果如下:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014284922/article/details/52358299

ASP.NET MVC+Bootstrap分页

ASP.NET MVC+Bootstrap分页
  • 2017年03月31日 23:42

插件介绍: DataTables 表格分页

官网: 英文:https://datatables.net/ 中文:http://www.datatables.club/引入文件(结合bootstrap样式): ...
  • kangguowei
  • kangguowei
  • 2017-06-02 21:09:07
  • 9505

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

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

datatables服务器分页

问题最近使用了bootstrap的datatables插件,但是在分页的时候遇到了问题。效果图解决方法引入这部分就不讲了开启服务器模式$("#example1").DataTable({ "s...
  • baochao95
  • baochao95
  • 2017-05-20 16:45:14
  • 1309

datatables服务器端分页查询

本文是jqueryspring(3.0)系列的第三篇。 原文地址:http://blog.csdn.net/hy840429/article/details/5626878 jquery与yu...
  • u013654037
  • u013654037
  • 2015-12-11 09:41:12
  • 8066

Jquery dataTable完整例子(取数据、分页、样式等)

  • 2014年05月14日 15:42
  • 152KB
  • 下载

用jquery datatables实现页面分页,前端分页,后端分页

这两天搞了点网页上的分页,真的是搞得欲仙欲死,现在也只能说是搞了个入门的水平吧,现在就来写下这几天的收获。      用的是datatables的框架,先来个框架的地址:https://datata...
  • yuanhangLVli
  • yuanhangLVli
  • 2016-11-25 19:50:26
  • 7937

bootstrap-table表格客户端分页实例

bootstrap-table是非常方便好用的前端表格分页插件,使用者只需要提供数据源就能实现非常完美的分页效果,其分页方式可以分成客户端分页和服务端分页,其接收的数据源都是json数据格式。...
  • alan_liuyue
  • alan_liuyue
  • 2017-08-06 16:58:22
  • 4981

dataTable实现服务器端分页(python)

dataTable有两种分页方式: 一种是页面分页(把数据一次性加载到页面,然后再分页),另一种是服务器端分页. 由于后台数据较多,采用页面分页耗时太长,页面分页还有一个弊端,就是除了第一页,后面的页...
  • python_tty
  • python_tty
  • 2016-07-13 14:09:37
  • 2893

jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的。 引用 js文件 添加一个table 标签, 可以不用...
  • KokJuis
  • KokJuis
  • 2016-12-29 11:44:02
  • 14505
收藏助手
不良信息举报
您举报文章:jquery datatable客户端分页
举报原因:
原因补充:

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