如何在DataTables中跳转到指定页面？page() API失效求解决方案

常见无效原因 #

你之前的代码无效，大概率是因为DataTables的page()方法接收的是从0开始的索引值，而非直观的页码数字。比如要跳转到第2页，应该传1而不是2。

完整可行实现 #

1. 添加页码输入框

<input type="number" id="pageJumpInput" placeholder="输入页码跳转" min="1" style="margin:10px;">

2. 绑定跳转逻辑

// 初始化DataTables（确保配置启用分页）
var table = $('#dataList').DataTable({
  paging: true, // 必须开启分页，默认已开启，若手动关闭会导致跳转无效
  // 你的其他配置：列定义、数据源等
});

// 绑定输入框按键抬起事件
$('#pageJumpInput').on('keyup', function() {
  var inputVal = $(this).val().trim();
  var targetPage = parseInt(inputVal);
  var pageInfo = table.page.info();

  // 输入有效性验证
  if (isNaN(targetPage) || targetPage < 1 || targetPage > pageInfo.pages) {
    $(this).val('');
    return;
  }

  // 转换为0索引后跳转，仅重绘分页区域提升性能
  table.page(targetPage - 1).draw('page');
});

关键注意点 #

• 用table.page.info().pages获取总页数，避免输入超出有效范围
• 必须将输入转为整数，防止非数字输入引发错误
• 使用draw('page')仅重绘分页相关内容，比默认draw()更高效
• 确认DataTables初始化时未关闭分页功能

内容的提问来源于stack exchange，提问作者sara