欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于Datatables跳转到指定页的简单实例

程序员文章站 2022-07-06 21:15:25
因为项目用到datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#datatables 跳转到指定页#功能,实现代码如下: table = $(...

因为项目用到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跳转到指定页的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇: 卖担架

下一篇: 乡长与八路6