如何在Mottie's Tablesorter显示最后一页/无数据时显示添加客户按钮

需求回顾 #

你需要让页面上的「添加客户」按钮（或隐藏的div）在以下两种场景下显示：

• 表格没有分页（所有条目都能在一页显示，总条目数 ≤ 每页显示条数）
• 用户切换到表格的最后一页

之前遇到的问题 #

你尝试过initialized回调、监听pagerInitialized事件，但碰到了table.config.pager未定义的情况——这是因为pager实例在表格初始化的某些阶段还没完全写入table.config对象里，直接去拿会取不到。

正确实现方案 #

我们可以通过监听Tablesorter的分页相关事件，利用事件回调里直接提供的pager实例来做判断，避免去读取未初始化的table.config.pager。

完整代码示例

$(function() {
  // 替换成你的表格选择器
  const $targetTable = $('#customer-table');
  // 替换成你的「添加客户」按钮选择器
  const $addCustomerBtn = $('#add-customer-btn');

  // 初始化Tablesorter及分页器
  $targetTable.tablesorter({
    // 这里放你的表格配置，比如排序规则、插件等
    widgets: ['zebra'],
    widgetOptions: {
      zebra: ['table-row-even', 'table-row-odd']
    }
  }).tablesorterPager({
    // 分页器配置
    container: $('#pager-controls'),
    size: 15, // 每页显示15条数据
    output: '当前页: {page} / {totalPages}'
  });

  // 核心判断函数：检查是否满足显示按钮的条件
  function checkShowButton(pagerInstance) {
    // 条件A：无分页需求（总条数 ≤ 每页条数）
    const noPagination = pagerInstance.totalRows <= pagerInstance.size;
    // 条件B：当前是最后一页（注意page是从0开始计数的）
    const isLastPage = (pagerInstance.page + 1) === pagerInstance.totalPages;

    // 根据条件切换按钮显示状态
    if (noPagination || isLastPage) {
      $addCustomerBtn.show();
    } else {
      $addCustomerBtn.hide();
    }
  }

  // 分页器初始化完成后，首次检查状态
  $targetTable.on('pagerInitialized', function(event, pager) {
    checkShowButton(pager);
  });

  // 每次切换分页时，重新检查状态
  $targetTable.on('pagerChange', function(event, pager) {
    checkShowButton(pager);
  });
});

关键说明

1. 用事件回调的pager实例：pagerInitialized和pagerChange事件触发时，回调参数里的pager是已经完全初始化好的实例，包含了我们需要的totalRows（总条目数）、size（每页条数）、page（当前页索引）、totalPages（总页数）这些属性，完全不需要依赖table.config.pager。
2. 页码计数注意：pager.page是从0开始的，所以判断最后一页时要加1再和totalPages对比，比如总页数是5，最后一页的page值是4，4+1=5才等于总页数。
3. 灵活调整选择器：把代码里的表格、按钮、分页容器选择器替换成你项目里实际的DOM选择器即可。

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