如何在jQuery DataTable中隐藏首页上一页与末页下一页按钮

开发者阿泽

2026-5-27

解决DataTables隐藏禁用分页按钮的问题

嘿，这个需求挺常见的，我给你两种实用的解决方案，都能完美实现你要的「隐藏禁用状态的首页/上一页、末页/下一页按钮」的效果：

方法一：CSS样式直接隐藏（最简单省心）

DataTables会给禁用的分页按钮自动加上disabled类，我们只需要通过CSS把带这个类的按钮隐藏掉就行，不需要修改JS初始化代码：

/* 隐藏所有处于禁用状态的分页按钮 */
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate .paginate_button.disabled:active {
    display: none !important;
}

把这段CSS加到你的页面样式里就搞定了——当表格处于第一页时，首页和上一页按钮会自动隐藏；处于最后一页时，下一页和末页按钮也会被隐藏，完全符合你的需求。

方法二：利用DataTables回调函数动态控制（更灵活）

如果需要更定制化的逻辑（比如只隐藏特定按钮、或在特定条件下才隐藏），可以用drawCallback回调函数，每次表格绘制完成后检查按钮状态并切换显示：

修改你的DataTables初始化代码如下：

$('#userTable').DataTable({
    drawCallback: function() {
        // 遍历所有分页按钮
        $('.dataTables_paginate .paginate_button').each(function() {
            // 根据按钮是否禁用，切换显示/隐藏状态
            if ($(this).hasClass('disabled')) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    }
});

这个方法的优势是扩展性强，你可以根据自己的需求调整逻辑，比如只隐藏首页和末页按钮，或者在表格数据量不足一页时隐藏所有分页控件。