基于Datatables跳轉(zhuǎn)到指定頁(yè)的簡(jiǎn)單實(shí)例
因?yàn)轫?xiàng)目用到Datatables發(fā)現(xiàn)在分頁(yè)特別多時(shí)無(wú)法跳轉(zhuǎn)到指定頁(yè),自己動(dòng)手增加了#Datatables 跳轉(zhuǎn)到指定頁(yè)#功能,實(shí)現(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);
}
// 核心實(shí)現(xiàn):不能放到initComplete方法里,因?yàn)楸砀裰剌d后跳轉(zhuǎn)功能會(huì)消失
if (table.api().page.info().pages > 1) {
$("#dynamic-table_info").append('<div class="jump-page">跳到 <input type="number" id="jump_page" min="1"> 頁(yè)</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)到指定頁(yè)
$("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)到指定頁(yè)的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery方法簡(jiǎn)潔實(shí)現(xiàn)隔行換色及toggleClass的使用
隔行換色的展示效果想必大家早已熟悉了吧,今天在幫大家回憶一下本例中主要用到的方法是toggleClass(),感興趣的你可不要錯(cuò)過(guò)了哈,希望可以幫助到你2013-03-03
jQuery文字橫向滾動(dòng)效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery文字橫向滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
關(guān)注jquery技巧提高jquery技能(前端開發(fā)必學(xué))
本文給大家介紹jquery前端開發(fā)關(guān)注jquery技巧提高jquery技能,對(duì)jquery前端開發(fā)感興趣的朋友可以參考下本文2015-11-11
jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
這篇文章主要介紹了jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的示例程序,大家參考使用吧2013-11-11
jquery+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證
表單驗(yàn)證一直很繁瑣,特別是大點(diǎn)的表單,如果每個(gè)input都去單獨(dú)寫驗(yàn)證簡(jiǎn)直要寫死人,最近寫了一小段js統(tǒng)一的驗(yàn)證表單內(nèi)容是否正確。需要的朋友可以參考下2015-09-09
jquery入門——事件機(jī)制之事件中的冒泡現(xiàn)象示例解釋
事件被觸發(fā)后被分為兩個(gè)階段,一個(gè)是捕獲(Capture),另一個(gè)是冒泡(Bubbing),但大多瀏覽器并不是都支持捕獲階段,因此事件被觸發(fā)后,往往執(zhí)行冒泡過(guò)程,感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)事件機(jī)制有所幫助2013-02-02
jquery動(dòng)態(tài)添加文本并獲取值的方法
下面小編就為大家?guī)?lái)一篇jquery動(dòng)態(tài)添加文本并獲取值的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10

