嘿，这个需求我之前帮不少开发者实现过～Tabulator本身确实没有内置像DataTables那样的页码跳转输入框，但借助它的API和几行自定义代码，完全可以轻松搞定。下面给你两种实用的实现方式，你可以根据自己的需求选：

如果你想完全掌控分页区域的样式和布局，可以用Tabulator的paginationElement选项，自定义包含跳转输入框的分页UI。

步骤1：准备自定义分页HTML #

先写好包含上/下页按钮、页码信息和跳转输入框的结构：

<div class="custom-pagination" style="display: flex; gap: 8px; align-items: center; padding: 8px;">
  <button id="prev-page" style="padding: 4px 8px;">上一页</button>
  <span>第 <span id="current-page">1</span> 页 / 共 <span id="total-pages">1</span> 页</span>
  <input 
    type="number" 
    id="page-jump" 
    min="1" 
    placeholder="输入页码"
    style="width: 60px; padding: 4px;"
  >
  <button id="next-page" style="padding: 4px 8px;">下一页</button>
</div>

步骤2：初始化表格并绑定事件 #

在Tabulator初始化时指定自定义分页容器，然后通过API绑定分页逻辑和跳转事件：

// 初始化表格
const table = new Tabulator("#your-table-id", {
  pagination: "local", // 远程分页就改成"remote"
  paginationSize: 10, // 每页显示条数
  paginationElement: document.querySelector(".custom-pagination"),
  // 其他表格配置（列定义、数据源等）...
});

// 监听分页变化，更新页码显示和输入框最大值
table.on("paginationChanged", (pagination) => {
  document.getElementById("current-page").textContent = pagination.page;
  document.getElementById("total-pages").textContent = pagination.last_page;
  document.getElementById("page-jump").max = pagination.last_page;
});

// 上一页按钮逻辑
document.getElementById("prev-page").addEventListener("click", () => {
  table.previousPage();
});

// 下一页按钮逻辑
document.getElementById("next-page").addEventListener("click", () => {
  table.nextPage();
});

// 输入框回车跳转逻辑
document.getElementById("page-jump").addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    const targetPage = parseInt(e.target.value);
    const totalPages = table.getPageMax();
    
    // 验证页码有效性
    if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages) {
      table.setPage(targetPage);
      e.target.value = ""; // 清空输入框
    } else {
      alert(`请输入1-${totalPages}之间的有效页码`);
      e.target.value = table.getPage(); // 重置为当前页码
    }
  }
});

如果想保留Tabulator自带的分页按钮，只额外加一个跳转输入框，可以在表格初始化完成后，往默认分页容器里插入元素：

const table = new Tabulator("#your-table-id", {
  pagination: "local",
  paginationSize: 10,
  // 其他表格配置...
  ready: () => {
    // 获取默认分页容器（Tabulator内置类名是tabulator-pagination）
    const paginationContainer = document.querySelector(".tabulator-pagination");
    if (!paginationContainer) return;

    // 创建跳转输入框容器
    const jumpWrapper = document.createElement("div");
    jumpWrapper.style.cssText = "display: inline-block; margin-left: 12px;";
    jumpWrapper.innerHTML = `
      <span style="margin-right: 4px;">跳转到：</span>
      <input type="number" class="page-jump-input" min="1" style="width: 60px; padding: 2px;">
    `;
    paginationContainer.appendChild(jumpWrapper);

    const jumpInput = jumpWrapper.querySelector(".page-jump-input");

    // 同步分页信息到输入框
    table.on("paginationChanged", (pagination) => {
      jumpInput.max = pagination.last_page;
    });

    // 回车触发跳转
    jumpInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        const targetPage = parseInt(e.target.value);
        const totalPages = table.getPageMax();
        
        if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages) {
          table.setPage(targetPage);
          e.target.value = "";
        } else {
          alert(`请输入1-${totalPages}范围内的页码`);
          e.target.value = table.getPage();
        }
      }
    });
  }
});

额外提示 #

• 如果你用的是远程分页（pagination: "remote"），不需要额外修改逻辑，table.setPage()会自动触发Tabulator的远程请求，带上对应的页码参数。
• 可以根据自己的项目样式规范调整输入框和按钮的CSS，让它和Tabulator的默认风格统一。
• 除了回车触发，你还可以给输入框加blur事件，让用户点击其他地方时也触发跳转。

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