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;
    }

}