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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 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
也谈 PHP 和 MYSQL
2006/10/09 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
再谈JavaScript异步编程
2016/01/27 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue的过滤器filter实例详解
2018/09/17 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python爬虫文件下载图文教程
2018/12/23 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
师范生个人推荐信
2013/11/29 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
教室布置标语
2014/06/26 职场文书
三年级学生评语大全
2014/12/26 职场文书
西游降魔篇观后感
2015/06/15 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
分享3个非常实用的 Python 模块
2022/03/03 Python