您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“jquery中dataTable后臺加載數(shù)據(jù)并分頁的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jquery中dataTable后臺加載數(shù)據(jù)并分頁的示例分析”這篇文章吧。
使用 dataTable后臺加載數(shù)據(jù)并分頁。網(wǎng)上版本很多,但很多都是不能用或者不詳細(xì)的,這里是已經(jīng)驗證過的。
引用 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 標(biāo)簽,<tbody></tbody> 可以不用,可以動態(tài)加載
<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> 創(chuàng)建時間</th> <th class="hidden-480">Status</th> <th>操作</th> </tr> </thead> </table>
關(guān)鍵的JS代碼:
<script type="text/javascript"> jQuery(function($) { //初始化table var oTable1 = $('#sample-table-2') .dataTable( { "bPaginate" : true,//分頁工具條顯示 //"sPaginationType" : "full_numbers",//分頁工具條樣式 "bStateSave" : true, //是否打開客戶端狀態(tài)記錄功能,此功能在ajax刷新紀(jì)錄的時候不會將個性化設(shè)定回復(fù)為初始化狀態(tài) "bScrollCollapse" : true, //當(dāng)顯示的數(shù)據(jù)不足以支撐表格的默認(rèn)的高度 "bLengthChange" : true, //每頁顯示的記錄數(shù) "bFilter" : false, //搜索欄 "bSort" : true, //是否支持排序功能 "bInfo" : true, //顯示表格信息 "bAutoWidth" : true, //自適應(yīng)寬度 "bJQueryUI" : false,//是否開啟主題 "bDestroy" : true, "bProcessing" : true, //開啟讀取服務(wù)器數(shù)據(jù)時顯示正在加載中……特別是大數(shù)據(jù)量的時候,開啟此功能比較好 "bServerSide" : true,//服務(wù)器處理分頁,默認(rèn)是false,需要服務(wù)器處理,必須true "sAjaxDataProp" : "aData",//是服務(wù)器分頁的標(biāo)志,必須有 "sAjaxSource" : "${basePath}pushEntity/getTableData",//通過ajax實現(xiàn)分頁的url路徑。 "aoColumns" : [//初始化要顯示的列 { "mDataProp" : "id",//獲取列數(shù)據(jù),跟服務(wù)器返回字段一致 "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" : [ {//用來設(shè)置列一些特殊列的屬性 "bSortable" : false, "aTargets" : [ 0 ] //第一列不排序 }, { "bSortable" : false, "aTargets" : [ 5 ] }, { "bSortable" : false, "aTargets" : [ 6 ] } ], "oLanguage" : {//語言設(shè)置 "sProcessing" : "處理中...", "sLengthMenu" : "顯示 _MENU_ 項結(jié)果", "sZeroRecords" : "沒有匹配結(jié)果", "sInfo" : "顯示第 _START_ 至 _END_ 項結(jié)果,共 _TOTAL_ 項", "sInfoEmpty" : "顯示第 0 至 0 項結(jié)果,共 0 項", "sInfoFiltered" : "(由 _MAX_ 項結(jié)果過濾)", "sInfoPostFix" : "", "sSearch" : "搜索:", "sUrl" : "", "sEmptyTable" : "表中數(shù)據(jù)為空", "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>
后臺代碼:
// 獲取前端過來的參數(shù),下面三個參數(shù)是 dataTable默認(rèn)的,不要隨便更改 Integer sEcho = Integer.valueOf(params.get("sEcho"));// 記錄操作的次數(shù) 每次加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 { // 查詢數(shù)據(jù),分頁的話我這邊使用的是 PageHelper,這邊不介紹了 PagedResult<PushEntity> list = pushEntityService.findByUserId( pushUser.getId(), iDisplayStart, iDisplayLength); // 為操作次數(shù)加1,必須這樣做 int initEcho = sEcho + 1;
//返回參數(shù)也是固定的 map.put("sEcho", initEcho); map.put("iTotalRecords", list.getTotal());//數(shù)據(jù)總條數(shù) map.put("iTotalDisplayRecords", list.getTotal());//顯示的條數(shù) map.put("aData", list.getDataList());//數(shù)據(jù)集合 } catch (Exception e) { e.printStackTrace(); } return map;
以上是“jquery中dataTable后臺加載數(shù)據(jù)并分頁的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。