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

一、解决方案

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

dom': 'l'toolbar'frtip '，//自定义工具栏//设置工具栏内容//l -变长输入控制//f -过滤输入//t -表格！//我-表格信息汇总//p -分页控制//r -处理显示元素[javascript]查看纯文本打印？$('div.toolbar ').html(' b style='color:red '跳转第输入id='搜索号码'/b style=' color : red；'页');2.监听文本框的变化事件，执行插件的调转页面方法

//调转到指定页面索引，注意大小写var oTable=$('#example1 ').dataTable()；oTable.fnPageChange(页面);3.插件绘制成功后，绑定文本框的值

//绘制的时候触发，绑定文本框的值table.on('draw.dt '，函数(e ),设置，数据){ var info=table。佩奇。info()；//此处的页，面，张，版为0开始计算console.info('显示页面：“信息.页面”的信息。页')；$('#searchNumber ').val(信息页1);});二、完整示例代码

表id='示例1 ' class=' table table-悬停表-分条'和tr th编号/th姓名/th性别/th生日/th班级/th/tr/thead/table $(function(){//注意方法名为数据表变量表=$('#example1 ').DataTable({ ' DOM ' : ' l '工具栏' fr tip '，//自定义工具栏pagingType': 'full_numbers '，lengthMenu: [3，5，10]，processing: true，//是否使用进度条serverSide: true，//是否启用数据库加载Ajax : { URL : '/tableone/getlist '，类型： 'post '，数据：函数(d) { d.name='张三；/* * 自定义aja参数* 特别说明，此处可以重写控件的默认参数，比如分页参数*///d . start=0；//控制台。信息(d)；//var page=$('#searchNumber ').val()；//page=ParSeint(page)| | 1；//d .开始=(第-1页)* d .长度；} }, //指定列绑定的字段columns: [ { data: 'sno' }，{ data: 'sname' }，{ data: 'ssex' }，{ data: 'sbirthday' }，{ data: 'class' } ]，order: [ [3，' desc ']})；$('div.toolbar ').html('b style='color:red '跳转第输入id='搜索号码'/b style=' color : red；'页');//绑定分页事件-在切换分页的时候触发//table.on('page.dt '，function(){//var info=table。佩奇。info()；//控制台。信息('显示第：页'信息。信息的第页。页')；//});//绘制的时候触发，绑定文本框的值table.on('draw.dt '，函数(e ),设置，数据){ var info=table。佩奇。info()；//此处的页，面，张，版为0开始计算console.info('显示页面：“信息.页面”的信息。页')；$('#searchNumber ').val(信息页1);});//监听文本框更改$('#searchNumber ').change(function(){ var page=$(this)).val()；page=ParSeint(page)| | 1；page=page-1；//调转到指定页面索引，注意大小写var oTable=$('#example1 ').dataTable()；oTable.fnPageChange(页面);});});显示如下：

以上所述是小编给大家介绍的JQuery.dataTables表格插件添加跳转到指定页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！