基于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一组验证函数
Dec 20 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
如何将Node.js中的回调转换为Promise
Nov 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下使用无限生命期Session的方法
2007/03/16 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
php curl发送请求实例方法
2019/08/01 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python的变量与赋值详细分析
2017/11/08 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
物流管理应届生求职信
2013/11/07 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
小学语文复习计划
2015/01/19 职场文书
故宫导游词
2015/01/31 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
大学生求职信怎么写
2015/03/19 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python