首页 > 编程 > JavaScript > 正文

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

2019-11-19 16:22:42
字体:
来源:转载
供稿:网友

一、解决方案

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表格插件添加跳转到指定页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表