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复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
php使用codebase生成随机数
2014/03/25 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python做简单的字符串匹配详解
2017/03/21 Python
详解Python中的四种队列
2018/05/21 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
详解python 内存优化
2020/08/17 Python
python tkinter实现连连看游戏
2020/11/16 Python
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
初中美术教学反思
2016/02/17 职场文书
导游词之崇武古城
2019/10/07 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python