因為項目用到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);
}
});
