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日程管理控件glDatePicker用法详解
Mar 29 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery实现异步文件上传ajaxfileupload.js
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
非常好用的Zend Framework分页类
2014/06/25 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
最短的IE判断代码
2011/03/13 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
详解如何使用Python编写vim插件
2017/11/28 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
基于python实现KNN分类算法
2020/04/23 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
用Python解数独的方法示例
2019/10/24 Python
Python列表元素常见操作简单示例
2019/10/25 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Python json读写方式和字典相互转化
2020/04/18 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
利用python 读写csv文件
2020/09/10 Python
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
违反学校规定检讨书
2014/01/18 职场文书
地道战观后感300字
2015/06/04 职场文书
植树节新闻稿
2015/07/17 职场文书