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

一、解决方案

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