Tabulator JS如何禁用分页首尾、页码按钮仅保留上下页按钮

目前Tabulator 5.x版本没有提供单独禁用首页、尾页按钮的独立开关，但可以通过内置配置+极少量代码快速实现需求，不需要修改框架源码。

快速实现方案（推荐） #

使用框架内置的分页配置隐藏数字页码，配合CSS隐藏首页、尾页按钮，对原有代码侵入性最低：

1. 在表格初始化参数中新增paginationButtonCount: 0配置：
   这个配置和你正在使用的paginationCounter同属分页模块内置配置，作用是控制分页栏中间显示的数字页码按钮数量，设为0时会直接隐藏所有1、2、3这类数字选择按钮。
2. 添加一段全局CSS，隐藏首页、尾页按钮：
   Tabulator给分页按钮加了固定的data属性标记，可以直接精准选中不需要的按钮隐藏，不影响其他元素：

.tabulator-footer .tabulator-page[data-page="first"],
.tabulator-footer .tabulator-page[data-page="last"] {
  display: none !important;
}

修改后你的表格初始化核心代码如下，原有业务逻辑完全不需要改动：

var table = new Tabulator('#example-table', {
  data: tabledata,
  layout: 'fitColumns',
  responsiveLayout: 'hide',
  tooltips: true,
  addRowPos: 'top',
  history: true,
  pagination: 'local',
  paginationSize: 2,
  paginationButtonCount: 0, // 新增配置：隐藏数字页码
  paginationCounter: 'rows',
  movableColumns: true,
  initialSort: [
    { column: 'name', dir: 'asc' },
  ],
  columns: [
    // 原有列配置保持不变即可
    { title: 'Name', field: 'name', editor: 'input' },
    {
      title: 'Task Progress',
      field: 'progress',
      hozAlign: 'left',
      formatter: 'progress',
      editor: true,
    },
    {
      title: 'Gender',
      field: 'gender',
      width: 95,
      editor: 'select',
      editorParams: { values: ['male', 'female'] },
    },
    {
      title: 'Rating',
      field: 'rating',
      formatter: 'star',
      hozAlign: 'center',
      width: 100,
      editor: true,
    },
    { title: 'Color', field: 'col', width: 130, editor: 'input' },
    {
      title: 'Date Of Birth',
      field: 'dob',
      width: 130,
      sorter: 'date',
      hozAlign: 'center',
    },
    {
      title: 'Driver',
      field: 'car',
      width: 90,
      hozAlign: 'center',
      formatter: 'tickCross',
      sorter: 'boolean',
      editor: true,
    },
  ],
});

配置完成后分页栏只会保留上一页、下一页按钮和你设置的行计数文本，分页跳转、翻页禁用状态等原有逻辑全部正常生效。

高度自定义方案 #

如果需要完全掌控分页栏结构，可以使用paginationFooter配置自定义整个分页区域的渲染逻辑，手动只渲染需要的按钮，不需要额外写CSS：

var table = new Tabulator('#example-table', {
  // 其他基础配置保持不变
  pagination: 'local',
  paginationSize: 2,
  paginationCounter: 'rows',
  // 自定义分页栏渲染
  paginationFooter: function(){
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.gap = '8px';
    container.style.alignItems = 'center';
    container.style.padding = '4px 8px';

    // 上一页按钮
    const prevBtn = document.createElement('button');
    prevBtn.innerText = '上一页';
    prevBtn.addEventListener('click', () => table.previousPage());

    // 计数容器，框架会自动填充计数文本
    const counterEl = document.createElement('span');
    counterEl.classList.add('tabulator-paginator-counter');

    // 下一页按钮
    const nextBtn = document.createElement('button');
    nextBtn.innerText = '下一页';
    nextBtn.addEventListener('click', () => table.nextPage());

    container.append(prevBtn, counterEl, nextBtn);
    return container;
  }
})

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