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


Posted in Javascript onNovember 09, 2017

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

Javascript 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
Javascript 构造函数详解
Oct 22 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 #Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 #Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 #Javascript
javascript自定义事件功能与用法实例分析
Nov 08 #Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 #Javascript
You might like
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python TCP包注入方式
2020/05/05 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
高中自我鉴定范文
2013/11/03 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
优秀大学生自荐信
2014/06/09 职场文书
社区助残日活动总结
2014/08/29 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
感谢信模板大全
2015/01/23 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
值班管理制度范本
2015/08/06 职场文书