因為項目用到Datatables發現在分頁特別多時無法跳轉到指定頁,自己動手增加了#Datatables 跳轉到指定頁#功能,實現代碼如下:
創新互聯公司專注于江陵企業網站建設,成都響應式網站建設,電子商務商城網站建設。江陵網站建設公司,為江陵等地區提供建站服務。全流程按需求定制開發,專業設計,全程項目跟蹤,創新互聯公司專業和態度為您提供的服務
table = $('#user-table').dataTable({ "bAutoWidth": false, "processing": true, "serverSide": true, "bStateSave":true, "pagingType": "full_numbers", "order": [[0, 'asc']], "ajax": get_users, "oLanguage": { "sUrl": "/js/advanced-datatable/lang/Chinese.json" }, "drawCallback": function( settings ) { if ($('body').height() < document.documentElement.clientHeight) { $('footer').css('position','fixed'); } else { $('footer').css('position','static'); } if ( sla_type == 1) { table.api().column(4).visible(false); } else { table.api().column(4).visible(true); } // 核心實現:不能放到initComplete方法里,因為表格重載后跳轉功能會消失 if (table.api().page.info().pages > 1) { $("#dynamic-table_info").append('<div class="jump-page">跳到 <input type="number" id="jump_page" min="1"> 頁</div>'); } }, "initComplete": function(settings, json) { if ($('body').height() < document.documentElement.clientHeight) { $('footer').css('position','fixed'); } else { $('footer').css('position','static'); } $('.adv-table input[type="search"]').addClass('form-control'); }, "rowCallback": function(row, data) { $('td:eq(0)', row).attr('title', '角色權限:' + data[11]); }, }); // datatables跳轉到指定頁 $("body").delegate('#jump_page', 'keyup', function(event) { var page = Number($(this).val()); if (event.keyCode == 13 && page > 0) { table.api().page(page - 1).draw(false); } });
以上這篇基于Datatables跳轉到指定頁的簡單實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持創新互聯。
網頁名稱:基于Datatables跳轉到指定頁的簡單實例
轉載源于:http://vcdvsql.cn/article16/iipodg.html
成都網站建設公司_創新互聯,為您提供商城網站、網站內鏈、靜態網站、Google、App設計、品牌網站設計
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯