文档章节

DataTables的服务器端分页处理

mitu
 mitu
发布于 2016/03/24 08:53
字数 486
阅读 206
收藏 0

前端代码如下:

$.fn.dataTable.ext.errMode = function(){
    alert("呃,貌似遇到了一点问题!");//更改获取数据异常的提示
}

var table =  $("#sample").dataTable({
    info:true,
    lengthChange:false,
    ordering:false,
    paging:true, //启用分页
    processing:true,
    searching:false,
    serverSide:true,//开启使用服务器端数据
    pageLength:10,//定义每页记录数
    columns:[//定义对应的每列数据,注意html里的table必须有<thead><tbody>
        {data:"name"},
        {data:"role"},
        {data:"id"}
    ],
    ajax:{//通过ajax获取服务器数据
        url:"",
        dataSrc:function(json){//我返回的数据格式{"list":""},如果不写这个默认会获取{"data":""}
            return json.list;
        },
        type:"POST",
        data:function(d){//ajax请求发送到服务器端的参数,服务器端可以request.getParameter("roleName")获取
            d.roleName = $("#roleName").val();
        },

    },
    columnDefs:[//这个比较有用,是获取数据后,你自己渲染对应列的内容,比如我把id列渲染成超链接
        {targets:2,render: function ( data, type, full, meta ) {
             return '<a href="${ctx}/sys/role/edit?id='+data+'">操作</a>&nbsp;&nbsp;<a href="${ctx}/sys/role/delRoleById/'+data+'">删除</a>';
            }
        }
    ],
    language:{//更改默认的提示信息
        zeroRecords:    "没有符合条件的数据",
        info:           "从 _START_ 到 _END_ 条,共 _TOTAL_ 数据",
        infoEmpty:      "",
        processing:"查询中……"
    }
})

//如果更改了roleName提供个查询按钮,可以这么写
$("#search_btn").click(function(){
     table.api().ajax.reload();
})

服务器端代码:

采用springmvc
@RequestMapping("/getRoleList")
@ResponseBody
public JSON getRoleList(@RequestParam("roleName") String roleName,
                        HttpServletRequest req, HttpServletResponse resp)
{
    //start,length,draw是datatables传递的时候默认自带的,无需设置
    //start,length 就是mysql里的 limit start,length
    Integer start = Integer.parseInt(req.getParameter("start"));
    Integer length = Integer.parseInt(req.getParameter("length"));
    Integer draw = Integer.parseInt(req.getParameter("draw"));//当前页数
    SysRole sysRole = new SysRole();
    if(!StringUtils.isEmpty(roleName)){
        sysRole.setName(roleName);
    }

    List<SysRole> list = sysRoleService.findListPage(sysRole,start,length);
    long count = sysRoleService.findListPageCount(sysRole);

    //必须设置返回值 recordsTotal,recordsFiltered,draw
    JSONObject json = new JSONObject();
    json.put("list",list);
    json.put("recordsTotal",count);
    json.put("recordsFiltered",count);
    json.put("draw",draw);
    return json;
}

OK,大功告成。

注:自己做的时候最困惑的问题在于ajax怎么向后台传递当前页数,起始条数,多看了几遍官方文档,才发现是datatables自己默认传递的,瞬间心好累

© 著作权归作者所有

下一篇: 实现侧滑栏
mitu
粉丝 0
博文 9
码字总数 1961
作品 0
聊城
私信 提问
DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只...

qing_gee
2018/09/01
0
0
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
2018/07/02
0
0
DataTables 使用配置

一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataT......

谢锡鹏
2015/01/19
1K
0
jquery之DataTables的使用

强大的表格解决方案,有多强大,一起来看下吧: 1、DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/...

mickelfeng
2012/11/12
385
1
dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123
2018/07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
11
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部