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
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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前端控制器用法示例
2016/12/11 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
CI框架附属类用法分析
2018/12/26 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python集合是否可变总结
2019/06/20 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
商务英语专业自荐信
2013/10/14 职场文书
门卫岗位职责
2013/11/15 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
财务负责人岗位职责
2015/02/03 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
分享一些Java的常用工具
2021/06/11 Java/Android
Java基础-封装和继承
2021/07/02 Java/Android
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL