DataTable 非常強大，當然前提是要會用。下面簡單介紹DataTable 的分頁功能，真分頁！！使用的Java語言，SpringMVC和MyBatis框架。

JSP:

<table id="paramTypeTable" class="table table-border table-bordered table-hover table-bg">
    <thead>
    <tr class="text-c">
        <th >引數類別編號</th>
        <th >引數類別名稱</th
 
>
        <th >系統編碼</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

/* 初始化DataTable相關資訊*/
function initDataTableSort() {
    var table=$('#paramTypeTable').dataTable({
        "aLengthMenu":[ 6, 8, 10, 20,50 ],
        "searching":false,//禁用搜索
"lengthChange"
 
:true,
        "paging": true,//開啟表格分頁
"bProcessing" : true,
        "bServerSide" : true,
        "bAutoWidth" : false,
        "sort" : "position",
        "deferRender":true,//延遲渲染
"bStateSave" : true, //在第三頁重新整理頁面，會自動到第一頁
"iDisplayLength" : 8,
        "iDisplayStart" : 0,
        "ordering": false,//全域性禁用排序
 
"ajax": {
            "type": "POST",
            "url":"${basePath}/system/param/loadParamTypeList.do",
            "data":function(d){
                //這裡可以傳入一些查詢引數 eg.   d.state=$("#state").val();
}
        },
        //為每一列繫結資料
"aoColumns" : [{
            "mData" : "dictCode",
            "orderable": false , // 禁用排序
"sDefaultContent" : "",
            "sWidth" : "20%"
},{
            "mData" : "dictName",
            "orderable": false , // 禁用排序
"sDefaultContent" : "",
            "sWidth" : "20%"
},{
            "mData" : "dictSystemCode",
            "orderable": false , // 禁用排序
"sDefaultContent" : "",
            "sWidth" : "20%"
}
        ],
        "oLanguage" : { // 國際化配置
"sProcessing" : "正在獲取資料，請稍後...",
            "sLengthMenu" : "顯示 _MENU_ 條",
            "sZeroRecords" : "沒有找到資料",
            "sInfo" : "從 _START_ 到  _END_ 條記錄 總記錄數為 _TOTAL_ 條",
            "sInfoEmpty" : "記錄數為0",
            "sInfoFiltered" : "(全部記錄數 _MAX_ 條)",
            "sInfoPostFix" : "",
            "sSearch" : "搜尋",
            "sUrl" : "",
            "oPaginate" : {
                "sFirst" : "第一頁",
                "sPrevious" : "上一頁",
                "sNext" : "下一頁",
                "sLast" : "最後一頁"
}
        },
        initComplete:initComplete,
        drawCallback: function( settings ) {

        }


    });
}

/**
 * 表格載入渲染完畢後執行的方法
* @param data
 */
function initComplete(data){

}

Pagination:

/**
 * Created by XJM on 2016/7/13.
 */
public class Pagination implements Serializable{
    private static final long serialVersionUID = 534886861976361772L;


    private Integer start; //從第多少條開始
private Integer length; //取多少條
public Integer getStart() {
        return start;
    }

    public void setStart(Integer start) {
        this.start = start;
    }

    public Integer getLength() {
        return length;
    }

    public void setLength(Integer length) {
        this.length = length;
    }
}

/**
 * 分頁載入資料
* @return
*/
@RequestMapping("/loadParamTypeList.do")
@ResponseBody
public Map<String, Object> loadParamTypeList(Pagination pagination){
    Map<String, Object> map = paramService.loadParamTypePagination(pagination);
    return map;
}

/**
 * 分頁查詢引數類別
* @param pagination
* @return
*/
@Override
public Map<String, Object> loadParamTypePagination(Pagination pagination) {
    Map<String, Object> map = new HashMap<String, Object>();
    //查詢總條數
int count=  baseParameterTypeMapper.selectCount();

    List<BaseParameterType> list=baseParameterTypeMapper.selectAllPagination(pagination);
    map.put("recordsTotal", count);
    map.put("recordsFiltered", count);
    map.put("aaData", list);

    return map;
}

<select id="selectAllPagination" resultMap="BaseResultMap" parameterType="com.okayisoft.ddc.common.domain.Pagination">
 select dict_type_id, dict_parent_id, dict_name, dict_code, dict_order, dict_system_code
  from base_parameter_type
  order by dict_order desc limit #{start},#{length}
</select>

以後有時間的話，再將步驟進行細化。