基于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 相关文章推荐
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
删除节点的jquery代码
Jan 13 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
Node学习记录之cluster模块
May 31 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
在JavaScript中调用php程序
2009/03/09 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
python 判断自定义对象类型
2009/03/21 Python
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
大班上学期幼儿评语
2014/04/30 职场文书
物业保安岗位职责
2014/07/02 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
员工年终考核评语
2014/12/31 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
高三毕业感言
2015/07/30 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android