基于Datatables跳轉(zhuǎn)到指定頁的簡單實例
更新時間:2017年11月09日 08:20:02 作者:gentsir
下面小編就為大家?guī)硪黄贒atatables跳轉(zhuǎn)到指定頁的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
因為項目用到Datatables發(fā)現(xiàn)在分頁特別多時無法跳轉(zhuǎn)到指定頁,自己動手增加了#Datatables 跳轉(zhuǎn)到指定頁#功能,實現(xiàn)代碼如下:
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);
}
// 核心實現(xiàn):不能放到initComplete方法里,因為表格重載后跳轉(zhuǎn)功能會消失
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', '角色權(quán)限:' + data[11]);
},
});
// datatables跳轉(zhuǎn)到指定頁
$("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跳轉(zhuǎn)到指定頁的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery方法簡潔實現(xiàn)隔行換色及toggleClass的使用
隔行換色的展示效果想必大家早已熟悉了吧,今天在幫大家回憶一下本例中主要用到的方法是toggleClass(),感興趣的你可不要錯過了哈,希望可以幫助到你2013-03-03
關(guān)注jquery技巧提高jquery技能(前端開發(fā)必學)
本文給大家介紹jquery前端開發(fā)關(guān)注jquery技巧提高jquery技能,對jquery前端開發(fā)感興趣的朋友可以參考下本文2015-11-11
jQuery計算textarea中文字數(shù)(剩余個數(shù))的小程序
這篇文章主要介紹了jQuery計算textarea中文字數(shù)(剩余個數(shù))的示例程序,大家參考使用吧2013-11-11
jquery+正則實現(xiàn)統(tǒng)一的表單驗證
表單驗證一直很繁瑣,特別是大點的表單,如果每個input都去單獨寫驗證簡直要寫死人,最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。需要的朋友可以參考下2015-09-09
jquery入門——事件機制之事件中的冒泡現(xiàn)象示例解釋
事件被觸發(fā)后被分為兩個階段,一個是捕獲(Capture),另一個是冒泡(Bubbing),但大多瀏覽器并不是都支持捕獲階段,因此事件被觸發(fā)后,往往執(zhí)行冒泡過程,感興趣的朋友可以了解下,或許對你學習事件機制有所幫助2013-02-02

