基于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 实现复制到粘贴板的功能代码
May 13 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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源代码
2009/08/21 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
消防安全责任书
2014/04/14 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
作风转变心得体会
2014/09/02 职场文书
小学生毕业评语
2014/12/26 职场文书