JQuery.dataTables表格插件跳转到指定页实例分享

本文主要介绍了jquery.datatables表格插件添加跳转到指定页的解决方案，非常不错，具有参考借鉴价值,需要的朋友可以参考下，希望能帮助到大家。

一、解决方案

1.添加自定义工具栏，嵌入文本框

2.监听文本框的change事件，执行插件的调转页面方法

3.插件绘制成功后，绑定文本框的值

二、完整示例代码

                                                             

编号	姓名	性别	生日	班级

  $(function () {    //注意方法名为DataTable    var table = $('#example1').DataTable({      "dom": 'lfrtip', //自定义工具栏      "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']      ]    });    $("p.toolbar").html(' 跳转第页');    //绑定分页事件----在切换分页的时候触发    //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插件datatables属性介绍及创建分页、排序实例详解

以上就是JQuery.dataTables表格插件跳转到指定页实例分享的详细内容，更多请关注php中文网其它相关文章！