JQuery.dataTables table plug-in jumps to the specified page example sharing

This article mainly introduces the JQuery.dataTables table plug-in to add a solution to jump to a specified page. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

1. Solution

1. Add a custom toolbar and embed the text box

 "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. Listen to the change event of the text box and execute the plug-in's transfer page method

//调转到指定页面索引 ，注意大小写 
var oTable = $('#example1').dataTable(); 
oTable.fnPageChange(page);

3. After the plug-in is drawn successfully, the value of the bound text box

//绘制的时候触发，绑定文本框的值 
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); 
});

2. The complete sample code

                                                             

编号	姓名	性别	生日	班级

  $(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);    });  });

is displayed as follows:

Related recommendations:

jQuery plug-in DataTables paging development technology sharing

Solution to jQuery Datatables header misalignment

Introduction to jquery plug-in datatables attributes and detailed explanations of creating paging and sorting examples

The above is the detailed content of JQuery.dataTables table plug-in jumps to the specified page example sharing. For more information, please follow other related articles on the PHP Chinese website!