前端之家收集整理的这篇文章主要介绍了
JQuery.dataTables表格插件添加跳转到指定页，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
1.添加自定义工具栏，嵌入文本框
自定义工具栏
//设置工具栏
内容
//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?
$("div.toolbar").html('
跳转第');
2.监听文本框的change事件，执行插件的调转页面方法
指定页面索引 ，注意大小写
var oTable = $('#example1').dataTable();
oTable.fnPageChange(page);
3.插件绘制成功后，绑定文本框的值
$('#searchNumber').val(info.page + 1);
});
二、完整示例代码
编号
| 姓名 |
性别 |
生日 |
班级 |
方法名为DataTable
var table = $('#example1').DataTable({
"dom": 'l<"toolbar">frtip',//
自定义工具栏
"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']
]
});
$("div.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',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表格插件添加跳转到指定页。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
