datatable 分页实例

1.使用datatable前台分页,需要后台返回全部数据,返回lisit

2.如果是后台分页 则后台需要获取分页参数,页面中要加

  "searchable":true,  "bServerSide": true

   这两个属性,不需要   dataSrc : ""   这个属性

  返回DataTablePageDto 分页对象,查询的list结果set到分页对象中

页面代码如下

currentDt = $table.DataTable({
                retrieve: true,
                 aoColumnDefs:[{"bSortable": false, "aTargets": [0]},{"bSortable": false, "aTargets": [1]}],//指定某列不排序
                ajax : {
                    url : baseUrl + "list",
                    data:{orgid:v},
                    dataSrc : ""              //前台分页要加该属性
                },
                fnHeaderCallback:function(){
                    $("#sp").html("<input type='checkbox' id='selectAll'  onchange='checkInp()'>");
                },
                fnDrawCallback: function()
                {
                      this.api().column(1).nodes().each(function(cell, i) {
                      cell.innerHTML =  i + 1;
                      });
                },
                columns : [
                    { 
                        title:"<span id='sp'><input type='checkbox' id='selectAll'  onchange='checkInp()'></span>",
                        data: "alink"
                    },
                    {
                        title:"<span class='num_tab'>序号</span>",
                        data :null,
                        targets: 0
                    },
                    {
                        title:"<span class='name'>姓名</span>",
                        data:"name"
                    },
                    {
                        title:"<span class='sex_list'>性别</span>",
                        data:"sex",
              "render":function(data,type,row,meta){
                 if(data=='1'){
                   data='男';
                 }else if(data=='2'){
                   data='女';
                 }else{
                   data='';
                 }
                   return data;
               } 
},
                    {
                        title:"现任职务",
                        data:"xrPresent"
                    },
                    {
                        title:"<span class='jiguan'>籍贯</span>",
                        data:"origin"
                    },
                    {
                        title:"入党时间",
                        data:"rdTime"                        
                    }
                    , {
                        title : "<span class='btn_td'>操作</span>",
                        data : "id",
                        createdCell:function(td,tdData){
                            var operator = [];
                            /** 查看不能用 框架样式 请调整。。。。。。***/
                            <s:hasPermission name="/admin/gov/sigin_list">
                            //选调生签到信息列表
                            var qdBtn = G.viewSigin(tdData,tz);
                            operator.push(qdBtn);
                            </s:hasPermission>
                            
                            /** 查看不能用 框架样式 请调整。。。。。。***/
                            <s:hasPermission name="/admin/gov/cadre_info">
                            var tz="1";//选调生信息列表
                            var xqBtn = G.viewBtn(tdData,tz);
                            operator.push(xqBtn);
                            </s:hasPermission>
                            
                            <s:hasPermission name="/admin/gov/check_pre">
                            var checkBtn = G.createCheckBtn(tdData);
                            operator.push(checkBtn);
                            </s:hasPermission>
                            
                            <s:hasPermission name="/admin/gov/cadre_update">
                            var suoBtn = G.createSuo1Btn(tdData);
                            operator.push(suoBtn);
                            </s:hasPermission>
                            
                            <s:hasPermission name="/admin/gov/cadre_delete">
                            var delBtn = G.createSuo2Btn(tdData);
                            operator.push(delBtn);
                            </s:hasPermission>
                            
                            
                            <s:hasPermission name="/admin/gov/cadre_view">
                            var view = G.createViewBtn(tdData);
                            operator.push(view);
                            </s:hasPermission>
                            
                            $(td).html(operator);
                        }
                    
                    } ],
            });

// 执行查询后的列表全选方法
function checkInp(){
var flag = false;
if($("#selectAll").is(':checked')){
flag = true;
}else{
flag = false;
}
$("input[name='gov-list']").each(function() {
$(this).attr("checked", flag);
});

 

java后台方法如下

   
//DataTablePageDto 分页对象,searchValue 搜索参数

@RequestMapping("/list") @ResponseBody public DataTablePageDto<TorgCadre> addCadre(Integer orgid, String ids,DataTablePageDto tablePage, HttpServletRequest request) throws UnsupportedEncodingException { String searchValue = request.getParameter("search[value]");          //搜索参数 searchValue = new String(searchValue.getBytes("iso8859-1"),"UTF-8");     //解决中文乱码 DataTablePageDto<TorgCadre> dataTablePageDto=new DataTablePageDto<TorgCadre>();//分页对象 dataTablePageDto.setStart(tablePage.getStart());                  //设置起始查询页 dataTablePageDto.setLength(tablePage.getLength());                 //设置查询条数 dataTablePageDto.setDraw(tablePage.getDraw());                    //绘制次数 StringBuffer hql = new StringBuffer("FROM TorgCadre WHERE status=? and name like ?"); List<TorgCadre> list = new ArrayList(); if (orgid != null && orgid > 0) { hql.append(" and orgid in ( "); hql.append(getAllOrgidsTwo(orgid)); // hql.append(getAllOrgids(orgid)); hql.append(" ) "); hql.append(levelOrder()); } else if (ids != null && !ids.trim().equals("")) { hql.append(" and id in ( "); hql.append(ids); hql.append(" ) "); hql.append(levelOrder()); }else if("admin".equals(getLoginUserinfo().getUsername())){ hql.append(levelOrder()); }else{ hql.append(" and 1=-1"); dataTablePageDto.setRecordsTotal(0L); dataTablePageDto.setRecordsFiltered(0L); } String hqlCount=hql.toString().replace("FROM", "select count(1) from"); Long total = cadreService.selectQueryCount(hqlCount.toString(),"1",searchValue);//总记录数 dataTablePageDto.setRecordsTotal(total); dataTablePageDto.setRecordsFiltered(total); list = cadreService.selectForList(hql.toString(),dataTablePageDto, "1",searchValue); for (TorgCadre t : list) { t.setTorgCadreFamilies(null); t.setTorgCadreResumes(null); t.setCheck(null); t.setAlink("<input type='checkbox' name='gov-list' value=" + t.getId() + ">"); } User obj = (User) getSession().getAttribute(SK.USER_INFO); log.info("查看列表成功"); dataTablePageDto.setData(list); return dataTablePageDto;//返回分页对象 }

分页对象实体类如下

//该后台分页是采用hibernate分页查询
public
class DataTablePageDto<T> { private List<T> data; //包含的数据 private Integer draw=1; //绘制次数 private Long recordsTotal;//总长度 private Long recordsFiltered;//过滤后的长度 private Integer start=0; //第几条数据开始查询 private Integer length=10; //每页显示几条 public DataTablePageDto() { } geter seter方法省略...... }

附其他分页实体

package com.diamond.core.feature.orm.hibernate;

import java.util.ArrayList;
import java.util.List;

/**
 * Mybatis分页参数及查询结果封装. 注意所有序号从1开始.
 * 
 * @param <T>
 *            Page中记录的类型.
 * @author StarZou
 * @since 2014年5月18日 下午1:34:32
 **/
public class Page<T> {
    // --分页参数 --//
    /**
     * 页编号 : 第几页
     */
    protected int pageNo = 1;
    /**
     * 页大小 : 每页的数量
     */
    protected int pageSize = 15;

    /**
     * 偏移量 : 第一条数据在表中的位置
     */
    protected int offset;

    /**
     * 限定数 : 每页的数量
     */
    protected int limit;

    // --结果 --//
    /**
     * 查询结果
     */
    protected List<T> result = new ArrayList<T>();

    /**
     * 总条数
     */
    protected int totalCount;

    /**
     * 总页数
     */
    protected int totalPages;

    // --计算 数据库 查询的参数 : LIMIT 3, 3; LIMIT offset, limit; --//
    /**
     * 计算偏移量
     */
    private void calcOffset() {
        this.offset = ((pageNo - 1) * pageSize);
    }

    /**
     * 计算限定数
     */
    private void calcLimit() {
        this.limit = pageSize;
    }

    // -- 构造函数 --//
    public Page() {
        this.calcOffset();
        this.calcLimit();
    }

    public Page(int pageNo, int pageSize) {
        this.pageNo = pageNo;
        this.pageSize = pageSize;
        this.calcOffset();
        this.calcLimit();
    }

    public Page(int start,int pageSize,String keyword){
        this.offset=start;
        this.pageSize = pageSize;
    }
    
    // -- 访问查询参数函数 --//
    /**
     * 获得当前页的页号,序号从1开始,默认为1.
     */
    public int getPageNo() {
        return pageNo;
    }

    /**
     * 获得每页的记录数量,默认为1.
     */
    public int getPageSize() {
        return pageSize;
    }

    /**
     * 根据pageNo和pageSize计算当前页第一条记录在总结果集中的位置,序号从1开始.
     */
    public int getFirst() {
        return ((pageNo - 1) * pageSize) + 1;
    }

    /**
     * 根据pageNo和pageSize计算当前页第一条记录在总结果集中的位置,序号从0开始.
     */
    public int getOffset() {
        return offset;
    }

    public int getLimit() {
        return limit;
    }

    // -- 访问查询结果函数 --//
    /**
     * 取得页内的记录列表.
     */
    public List<T> getResult() {
        return result;
    }

    /**
     * 设置页内的记录列表.
     */
    public void setResult(final List<T> result) {
        this.result = result;
    }

    /**
     * 取得总记录数, 默认值为-1.
     */
    public int getTotalCount() {
        return totalCount;
    }

    /**
     * 设置总记录数.
     */
    public void setTotalCount(final int totalCount) {
        this.totalCount = totalCount;
        this.totalPages = this.getTotalPages();
    }

    /**
     * 根据pageSize与totalCount计算总页数, 默认值为-1.
     */
    public int getTotalPages() {
        if (totalCount < 0) {
            return -1;
        }
        int pages = totalCount / pageSize;
        return totalCount % pageSize > 0 ? ++pages : pages;
    }

    public void setTotalPages(int totalPages) {
        this.totalPages = totalPages;
    }

}
原文地址:https://www.cnblogs.com/learnapi/p/8027662.html