JQuery.dataTables表格插件添加跳转到指定页


Posted in jQuery onJune 09, 2017

一、解决方案

1.添加自定义工具栏,嵌入文本框

"dom": 'l<"toolbar">frtip', //自定义工具栏 
//设置工具栏内容 
//l - length changing input control 
//f - filtering input 
//t - The table! 
//i - Table information summary 
//p - pagination control 
//r - processing display element 
[javascript] view plain copy print?
$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');

2.监听文本框的change事件,执行插件的调转页面方法

//调转到指定页面索引 ,注意大小写 
var oTable = $('#example1').dataTable(); 
oTable.fnPageChange(page);

3.插件绘制成功后,绑定文本框的值

//绘制的时候触发,绑定文本框的值 
table.on('draw.dt', function (e, settings, data) { 
  var info = table.page.info(); 
  //此处的page为0开始计算 
  console.info('Showing page: ' + info.page + ' of ' + info.pages); 
 
  $('#searchNumber').val(info.page + 1); 
});

二、完整示例代码

<table id="example1" class="table table-hover table-striped"> 
  <thead> 
    <tr> 
      <th>编号</th> 
      <th>姓名</th> 
      <th>性别</th> 
      <th>生日</th> 
      <th>班级</th> 
    </tr> 
  </thead> 
</table> 
$(function () { 
  //注意方法名为DataTable 
  var table = $('#example1').DataTable({ 
    "dom": 'l<"toolbar">frtip', //自定义工具栏 
    "pagingType": "full_numbers", 
    lengthMenu: [3, 5, 10], 
    processing: true,//是否使用进度条 
    serverSide: true,//是否启用数据库加载 
    ajax: { 
      url: '/tableone/getlist', 
      type: 'post', 
      data: function (d) { 
        d.name = '张三'; 
        /* 
        * 自定义aja参数 
        * 特别说明,此处可以重写控件的默认参数,比如分页参数 
        */ 
        // d.start = 0; 
        //console.info(d); 
        //var page = $('#searchNumber').val(); 
        //page = parseInt(page) || 1; 
        //d.start = (page - 1) * d.length; 
      } 
    }, 
    //指定列绑定的字段 
    columns: [ 
      { data: 'sno' }, 
      { data: 'sname' }, 
      { data: 'ssex' }, 
      { data: 'sbirthday' }, 
      { data: 'class' } 
    ], 
    order: [ 
      [3, 'desc'] 
    ] 
  }); 
  $("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>'); 
  //绑定分页事件----在切换分页的时候触发 
  //table.on('page.dt', function () { 
  //  var info = table.page.info(); 
  //  console.info('Showing page: ' + info.page + ' of ' + info.pages); 
  //}); 
  //绘制的时候触发,绑定文本框的值 
  table.on('draw.dt', function (e, settings, data) { 
    var info = table.page.info(); 
    //此处的page为0开始计算 
    console.info('Showing page: ' + info.page + ' of ' + info.pages); 
    $('#searchNumber').val(info.page + 1); 
  }); 
  //监听文本框更改 
  $('#searchNumber').change(function () { 
    var page = $(this).val(); 
    page = parseInt(page) || 1; 
    page = page - 1; 
    //调转到指定页面索引 ,注意大小写 
    var oTable = $('#example1').dataTable(); 
    oTable.fnPageChange(page); 
  }); 
});

显示如下:

JQuery.dataTables表格插件添加跳转到指定页

以上所述是小编给大家介绍的JQuery.dataTables表格插件添加跳转到指定页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery为某个div加入行样式
Jun 09 #jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
You might like
Zerg兵种介绍
2020/03/14 星际争霸
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP培训要多少钱
2017/06/06 PHP
js单向链表的具体实现实例
2013/06/21 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
js继承实现方法详解
2016/12/16 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
使用python加密自己的密码
2015/08/04 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Form表单及django的form表单的补充
2019/07/25 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
优秀班主任事迹材料
2014/12/16 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
学生会主席任命书
2015/09/21 职场文书