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": '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? $("p.toolbar").html(' 跳转第页');
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
编号 | 姓名 | 性别 | 生日 | 班级 |
---|
is displayed as follows:
Related recommendations:
jQuery plug-in DataTables paging development technology sharing
Solution to jQuery Datatables header misalignment
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!