如何在Datatables分页中自动显示下一页页码以替代省略号

嘿，这个需求其实很好实现，咱们可以通过两种方式来达成目标，一种是快速修改DOM元素，另一种是自定义分页逻辑（更推荐，稳定性更高），我给你一步步拆解：

方法一：利用drawCallback动态替换省略号 #

这个方法是在表格每次绘制完成后，找到分页栏里的省略号元素，替换成第6页的按钮，适合快速调整现有配置：

$('#yourTableId').DataTable({
  // 保留你原有的其他配置
  pagingType: 'full_numbers', // 确保分页类型是带完整页码的类型
  drawCallback: function(settings) {
    const api = this.api();
    const pageInfo = api.page.info();
    const currentPage = pageInfo.page + 1; // Datatables的page索引从0开始，转成实际页码要+1
    const totalPages = pageInfo.pages;

    // 获取所有分页按钮
    const paginationBtns = $('.dataTables_paginate .paginate_button');

    // 当当前页是第5页，且总页数大于6时执行替换
    if (currentPage === 5 && totalPages > 6) {
      // 找到省略号元素（Datatables给省略号加了ellipsis类）
      const ellipsis = paginationBtns.filter('.ellipsis');
      if (ellipsis.length > 0) {
        // 创建第6页的按钮
        const page6Btn = $('<a>', {
          class: 'paginate_button',
          href: '#',
          text: '6'
        }).on('click', function(e) {
          e.preventDefault();
          api.page(5).draw('page'); // 第6页对应索引5，draw('page')只刷新分页不重载表格
        });

        // 替换省略号为第6页按钮
        ellipsis.replaceWith(page6Btn);
      }
    }
  }
});

方法二：自定义分页类型（更稳定灵活） #

如果想从源头控制哪些页码显示、哪些用省略号，推荐自定义Datatables的分页逻辑，这样能全面适配你的需求：

// 注册自定义分页类型
$.fn.dataTable.ext.pager.customPageLogic = function(settings, page, pages) {
  const buttons = [];
  const currentPage = page + 1;

  // 添加首页、上一页按钮
  buttons.push('first', 'previous');

  // 处理页码按钮的显示逻辑
  if (pages <= 7) {
    // 总页数不多时，显示所有页码
    for (let i = 1; i <= pages; i++) {
      buttons.push(i);
    }
  } else {
    if (currentPage <= 5) {
      // 当前页在1-5区间：显示1-6页，然后省略号，最后一页
      for (let i = 1; i <= 6; i++) {
        buttons.push(i);
      }
      buttons.push('ellipsis');
      buttons.push(pages);
    } else if (currentPage >= pages - 4) {
      // 当前页在最后5页区间：显示首页，省略号，最后6页
      buttons.push(1);
      buttons.push('ellipsis');
      for (let i = pages - 5; i <= pages; i++) {
        buttons.push(i);
      }
    } else {
      // 中间页：显示首页、省略号、当前页前后2页、省略号、最后一页
      buttons.push(1);
      buttons.push('ellipsis');
      for (let i = currentPage - 2; i <= currentPage + 2; i++) {
        buttons.push(i);
      }
      buttons.push('ellipsis');
      buttons.push(pages);
    }
  }

  // 添加下一页、末页按钮
  buttons.push('next', 'last');

  return buttons;
};

// 初始化表格时使用自定义分页类型
$('#yourTableId').DataTable({
  // 其他配置不变
  pagingType: 'customPageLogic' // 指定使用咱们自定义的分页逻辑
});

这个自定义逻辑里，当你点击第5页时，分页栏会显示首页 上一页 1 2 3 4 5 6 ... 64 下一页 末页，完美替代了原来的省略号，而且其他页码区间的显示逻辑也更合理。

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