如何设置jQuery DataTables固定高度及固定分页位置

你要实现的表格内部滚动、底部对齐分页栏的效果，可以通过以下步骤实现：

1 基础配置（固定高度场景） #

直接在DataTables初始化时开启垂直滚动配置，通过scrollY指定滚动区域高度即可：

$('#你的表格ID').DataTable({
  // 你原本的其他配置项
  paging: true, // 确保分页功能开启
  scrollY: 'calc(100vh - 220px)', // 220px为页面内除表格滚动区域外的所有元素总高度（导航栏、页面边距、分页栏本身高度等），可根据实际布局调整数值
  scrollCollapse: true, // 数据量较少时表格自动收缩高度，不会出现多余空白
  scrollX: false // 无需横向滚动可关闭
});

2 动态适配高度（布局可变场景） #

如果页面其他元素高度不固定，可先计算页面剩余可用高度再赋值：

// 计算可用高度：视口总高度减去顶部导航、其他内容块、分页栏、页面边距的总高度
const usableHeight = window.innerHeight - $('.顶部导航的类名').outerHeight() - $('.其他内容块的类名').outerHeight() - 50; // 50为预留边距，自行调整

$('#你的表格ID').DataTable({
  // 其他原有配置
  paging: true,
  scrollY: usableHeight + 'px',
  scrollCollapse: true
});

// 窗口大小变化时自动重绘适配高度
$(window).on('resize', function() {
  const table = $('#你的表格ID').DataTable();
  const newHeight = window.innerHeight - $('.顶部导航的类名').outerHeight() - $('.其他内容块的类名').outerHeight() - 50;
  table.settings()[0].oScroll.sY = newHeight + 'px';
  table.draw();
});

3 配套样式调整 #

可添加少量CSS优化衔接效果，避免出现错位：

/* 消除滚动区域和分页栏的多余间距 */
.dataTables_wrapper .dataTables_scroll {
  margin-bottom: 0;
}
/* 分页栏顶部加分隔线，视觉更清晰 */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 8px;
  margin-top: 0;
  border-top: 1px solid #eee;
}

目标效果参考：

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