Tabulator分页组件：如何禁用首尾按钮及自定义控制按钮状态？

禁用First和Last按钮 #

你尝试的paginationButtonCount是控制显示的页码按钮数量，和首尾跳转按钮无关。要隐藏First和Last按钮，只需配置paginationButtonGroup选项，指定仅保留需要的按钮组：

var table = new Tabulator("#your-table-id", {
    pagination: "local", // 根据需求选择local/remote等分页模式
    paginationSize: 10, // 每页显示行数
    // 仅保留上一页、页码、下一页按钮
    paginationButtonGroup: ['prev', 'page', 'next']
});

默认的paginationButtonGroup值为['first', 'prev', 'page', 'next', 'last']，删除其中的'first'和'last'即可移除首尾跳转按钮。

自定义分页按钮的启用/禁用状态 #

Tabulator的分页按钮自带tabulator-page-btn-disabled和tabulator-page-btn-enabled类，你可以通过DOM操作或结合Tabulator事件动态控制按钮状态：

1. 直接操作DOM控制按钮 #

通过表格模块获取分页控制器元素，定位到目标按钮后修改类名：

// 获取分页模块实例
var paginationModule = table.getModule('pagination');
// 获取分页控制器的DOM容器
var paginationCtrl = paginationModule.pagination;

// 禁用Last按钮（按钮存在时执行）
var lastBtn = paginationCtrl.querySelector('.tabulator-page-btn-last');
if(lastBtn){
    lastBtn.classList.add('tabulator-page-btn-disabled');
    lastBtn.classList.remove('tabulator-page-btn-enabled');
}

// 启用Last按钮
if(lastBtn){
    lastBtn.classList.remove('tabulator-page-btn-disabled');
    lastBtn.classList.add('tabulator-page-btn-enabled');
}

2. 结合分页事件动态控制 #

如果需要根据当前页码动态调整按钮状态，可以监听page事件：

table.on("page", function(currentPage){
    var paginationCtrl = this.getModule('pagination').pagination;
    var nextBtn = paginationCtrl.querySelector('.tabulator-page-btn-next');
    
    // 示例：当当前页为第3页时，禁用下一页按钮
    if(currentPage === 3){
        nextBtn.classList.add('tabulator-page-btn-disabled');
    } else {
        nextBtn.classList.remove('tabulator-page-btn-disabled');
    }
});

常用分页按钮对应的CSS类：

• tabulator-page-btn-first：第一页按钮
• tabulator-page-btn-prev：上一页按钮
• tabulator-page-btn-next：下一页按钮
• tabulator-page-btn-last：最后一页按钮

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