溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

基于Datatables跳轉到指定頁的簡單實例

發布時間:2020-09-27 16:29:20 來源:腳本之家 閱讀:162 作者:gentsir 欄目:web開發

因為項目用到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跳轉到指定頁的簡單實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女