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的属性来提供实际的数据。

至此,客户端分页完毕~

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

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

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

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

Delphi7高级应用开发随书源码

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

jquery客户端分页

var array = []; //显示按优惠金额层 $("#showAmountDiv").click(function () { showDiv("amountDiv"); }); /...

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

2015-12-04 17:40 2977人阅读 评论(0) 收藏 举报  分类: js+jquery(17)  版权声明:本文为博主原创文章,未经博主允许不得转载。 一、介绍 D...

DataTable跳转到指定页

//跳转到指定页 function setCurPage(pageNum){ //$("#listDataTable").DataTable().search("").draw() $...

JQuery.dataTables表格插件添加跳转到指定页

一、解决方案 1.添加自定义工具栏,嵌入文本框  "dom": 'lfrtip', //自定义工具栏 //设置工具栏内容 //l - length changing input control //f...

JQuery DataTable 1.10服务端分页实现

现在JQuery DataTable最新版的是1.10版,然而已经网上最多是的1.9版或者之前的,最新版的内容比较少,由于英文不好,前端的经验也不是很多,经过一段的摸索,大体上实现了查询,分页等功能;...

jquery datatable服务端分页

OK,上次完成了客户端的分页,这次我们就在上一次的Demo上进行修改,来实现服务端的分页~ js代码: $(document).ready(function() { $('#table_id...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery datatable客户端分页
举报原因:
原因补充:

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