如何配置DataTable显示5条记录后启用垂直滚动条并自定义滚动提示

嘿，我来帮你搞定这个DataTable的需求问题～你的配置里有几个关键问题导致没达到预期效果，我给你梳理下解决方案：

你原来的配置里bInfo: false直接关闭了信息提示模块，所以看不到页码相关内容；而且DataTable默认的信息栏是和分页功能绑定的，当你禁用分页后，它不会自动根据垂直滚动来计算当前的“页”（也就是每5条一组的分组），所以需要调整配置+自定义滚动监听逻辑。

1. 调整DataTable基础配置 #

先把配置里的bInfo: false改成info: true（DataTable 1.10+推荐用驼峰命名，bInfo是旧版写法），同时自定义信息模板占位：

// 初始化DataTable
const table = $('#example').DataTable({
  iDisplayLength: 5,       // 默认每页显示5条
  scrollY: "200px",        // 垂直滚动区域高度
  scrollCollapse: true,    // 内容不足时自动收缩滚动区域
  paging: false,           // 禁用官方分页功能
  ordering: false,         // 禁用排序
  searching: false,        // 禁用搜索
  info: true,              // 开启信息显示模块
  language: {
    info: "Page _PAGE_ of _PAGES_"  // 自定义信息模板，先留占位符
  }
});

2. 添加滚动监听与页码计算逻辑 #

我们需要监听滚动容器的滚动事件，计算当前可视区域对应的“页码”，然后更新信息栏内容：

// 获取DataTable的滚动容器元素
const scrollContainer = table.table().container();

// 定义计算并更新页码的函数
function updatePageInfo() {
  const tableBody = table.table().body();
  const firstRowHeight = $(tableBody).find('tr:first').outerHeight(); // 获取单条数据行的高度
  const scrollTop = $(scrollContainer).scrollTop();
  const totalRows = table.data().length;
  const rowsPerPage = table.page.len(); // 就是我们设置的5条
  const totalPages = Math.ceil(totalRows / rowsPerPage); // 计算总页数

  // 计算当前页码：滚动距离 ÷ (单页总高度) + 1
  let currentPage = Math.floor(scrollTop / (firstRowHeight * rowsPerPage)) + 1;
  // 确保页码不超过总页数，避免滚动到底部时出现超出的情况
  currentPage = Math.min(currentPage, totalPages);

  // 更新信息栏的文本内容
  $(scrollContainer).find('.dataTables_info').text(`Page ${currentPage} of ${totalPages}`);
}

// 监听滚动事件，实时更新页码
$(scrollContainer).on('scroll', updatePageInfo);

// 页面初始化时执行一次，确保初始显示正确
updatePageInfo();

3. 可选：固定信息栏样式 #

如果想让页码提示固定在滚动容器的底部，不会跟着滚动消失，可以加一点CSS：

.dataTables_info {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  padding: 8px 0;
  margin-top: 6px;
  border-top: 1px solid #eee;
}

这样配置后，页面默认显示5条数据，超过5条时出现垂直滚动条，滚动时会实时更新“Page X of Y”的提示，完全符合你的需求～

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