使用 dataTable后臺加載數據并分頁。網上版本很多，但很多都是不能用或者不詳細的，這里是已經驗證過的。

引用 js文件

<script src="static/ace/js/jquery-2.0.3.min.js"></script>

<script src="static/ace/js/jquery.dataTables.min.js"></script> <script src="static/ace/js/jquery.dataTables.bootstrap.js"></script> 

添加一個table 標簽，<tbody></tbody> 可以不用，可以動態加載

<table id="sample-table-2" class="table table-striped table-bordered table-hover">     <thead>       <tr>         <th class="center"><label>             <input type="checkbox" class="ace" />             <span class="lbl"></span>           </label>         </th>         <th>名稱</th>         <th>apiKey</th>         <th>secretKey</th>         <th><i class="icon-time bigger-110 hidden-480"></i> 創建時間</th>         <th class="hidden-480">Status</th>         <th>操作</th>       </tr>     </thead>    </table>

關鍵的JS代碼：

<script type="text/javascript">   jQuery(function($) {      //初始化table     var oTable1 = $('#sample-table-2')         .dataTable(             {               "bPaginate" : true,//分頁工具條顯示               //"sPaginationType" : "full_numbers",//分頁工具條樣式               "bStateSave" : true, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態                "bScrollCollapse" : true, //當顯示的數據不足以支撐表格的默認的高度               "bLengthChange" : true, //每頁顯示的記錄數               "bFilter" : false, //搜索欄               "bSort" : true, //是否支持排序功能               "bInfo" : true, //顯示表格信息               "bAutoWidth" : true, //自適應寬度               "bJQueryUI" : false,//是否開啟主題               "bDestroy" : true,               "bProcessing" : true, //開啟讀取服務器數據時顯示正在加載中……特別是大數據量的時候，開啟此功能比較好               "bServerSide" : true,//服務器處理分頁，默認是false，需要服務器處理，必須true               "sAjaxDataProp" : "aData",//是服務器分頁的標志，必須有                "sAjaxSource" : "${basePath}pushEntity/getTableData",//通過ajax實現分頁的url路徑。                "aoColumns" : [//初始化要顯示的列                   {                     "mDataProp" : "id",//獲取列數據，跟服務器返回字段一致                     "sClass" : "center",//顯示樣式                     "mRender" : function(data, type, full) {//返回自定義的樣式                       return "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"                     }                   },                   {                     "mDataProp" : "appName"                   },                   {                     "mDataProp" : "apiKey"                   },                   {                     "mDataProp" : "secretKey"                   },                   {                     "mDataProp" : "createTime",                     "mRender" : function(data, type, full) {                       return new Date(data)//處理時間顯示                       .toLocaleString();                     }                   },                   {                     "mDataProp" : "createTime",                     "mRender" : function(data, type, full) {                       return "<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>"                     }                   },                   {                     "mDataProp" : "createTime",                     "mRender" : function(data, type, full) {                       return "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><a class='blue' href='#'><i class='icon-zoom-in bigger-130'></i></a><a class='green' href='#'><i class='icon-pencil bigger-130'></i></a><a class='red' href='#'><i class='icon-trash bigger-130'></i></a></div>"                     }                   } ],               "aoColumnDefs" : [ {//用來設置列一些特殊列的屬性                 "bSortable" : false,                 "aTargets" : [ 0 ]               //第一列不排序               }, {                 "bSortable" : false,                 "aTargets" : [ 5 ]               }, {                 "bSortable" : false,                 "aTargets" : [ 6 ]               } ],               "oLanguage" : {//語言設置                 "sProcessing" : "處理中...",                 "sLengthMenu" : "顯示 _MENU_ 項結果",                 "sZeroRecords" : "沒有匹配結果",                 "sInfo" : "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",                 "sInfoEmpty" : "顯示第 0 至 0 項結果，共 0 項",                 "sInfoFiltered" : "(由 _MAX_ 項結果過濾)",                 "sInfoPostFix" : "",                 "sSearch" : "搜索:",                 "sUrl" : "",                 "sEmptyTable" : "表中數據為空",                 "sLoadingRecords" : "載入中...",                 "sInfoThousands" : ",",                 "oPaginate" : {                   "sFirst" : "首頁",                   "sPrevious" : "上頁",                   "sNext" : "下頁",                   "sLast" : "末頁"                 },                 "oAria" : {                   "sSortAscending" : ": 以升序排列此列",                   "sSortDescending" : ": 以降序排列此列"                 }               }             });      //全選     $('table th input:checkbox').on(         'click',         function() {           var that = this;           $(this).closest('table').find(               'tr > td:first-child input:checkbox').each(               function() {                 this.checked = that.checked;                 $(this).closest('tr').toggleClass('selected');               });          });    }); </script>