本文主要介紹了JQuery.dataTables表格外掛程式添加跳到指定頁的解決方案，非常不錯，具有參考借鑒價值,需要的朋友可以參考下，希望能幫助到大家。
一、解決方案
1.新增自訂工具列，嵌入文字方塊
"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(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</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);
});登入後複製
二、完整範例程式碼
<table id="example1" class="table table-hover table-striped">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
</tr>
</thead>
</table>
$(function () {
//注意方法名为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']
]
});
$("p.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');
//绑定分页事件----在切换分页的时候触发
//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中文網其他相關文章！
