jquery dataTable 後臺載入資料並分頁
阿新 • • 發佈：2019-01-31
使用 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 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>
後臺程式碼：
// 獲取前端過來的引數,下面三個引數是 dataTable預設的，不要隨便更改 Integer sEcho = Integer.valueOf(params.get("sEcho"));// 記錄操作的次數 每次加1 Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始 Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每頁顯示的size Map<String, Object> map = new HashMap<String, Object>(); try { // 查詢資料,分頁的話我這邊使用的是 PageHelper，這邊不介紹了 PagedResult<PushEntity> list = pushEntityService.findByUserId( pushUser.getId(), iDisplayStart, iDisplayLength); // 為操作次數加1，必須這樣做 int initEcho = sEcho + 1;
//返回引數也是固定的
map.put("sEcho", initEcho);
map.put("iTotalRecords", list.getTotal());//資料總條數
map.put("iTotalDisplayRecords", list.getTotal());//顯示的條數
map.put("aData", list.getDataList());//資料集合
} catch (Exception e) {
e.printStackTrace();
}
return map;