JQuery.dataTables表格外掛程式跳到指定頁實例分享

本文主要介紹了JQuery.dataTables表格外掛程式添加跳到指定頁的解決方案，非常不錯，具有參考借鑒價值,需要的朋友可以參考下，希望能幫助到大家。

一、解決方案

1.新增自訂工具列，嵌入文字方塊

 "dom": 'lfrtip', //自定义工具栏 
//设置工具栏内容 
//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?
$("p.toolbar").html(' <b>跳转第</b><input><b>页</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); 
});

二、完整範例程式碼

                                                             

编号	姓名	性别	生日	班级

  $(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中文網其他相關文章！