Datatable静态HTML分页前加载全部行，刷新页面如何默认仅展示10行？

出现这个问题的核心原因是：你先把全量数据渲染成了HTML表格的DOM节点，之后才初始化Datatable。浏览器会先渲染完整的表格内容，等Datatable初始化完成接管表格后才会做分页截断，所以会出现先闪全量数据再显示10行的情况。
可以根据你的使用场景选择以下任意一种方案修复：

方案1：使用服务端分页（推荐，适合数据量过万的场景） #

开启serverSide参数，由后端接口返回当前页的10条数据，Datatable初始化时只会拉取当前页数据，不会加载全量内容：

$('#你的表格ID').DataTable({
  processing: true, // 加载中提示
  serverSide: true, // 开启服务端分页
  ajax: '/你的后端数据接口地址',
  pageLength: 10 // 默认每页10条
});

对应的HTML表格tbody初始保持为空即可，不需要提前写入所有行数据。

方案2：隐藏表格直到Datatable初始化完成（适合不想改现有逻辑的客户端分页场景） #

给表格默认设置隐藏，等Datatable初始化完成后再显示，用户就看不到全量数据加载的过程：
HTML部分：

<table id="你的表格ID" style="display: none;">
  <thead>
    <!-- 表头内容 -->
  </thead>
  <tbody>
    <!-- 你的全量行数据 -->
  </tbody>
</table>

JS初始化部分：

$('#你的表格ID').DataTable({
  pageLength: 10,
  initComplete: function() {
    // 初始化完成后显示表格
    $('#你的表格ID').show();
  }
});

方案3：通过JS传入全量数据（适合客户端分页、数据量不大的场景） #

不要把全量数据提前写到HTML的tbody里，而是把数据存在JS数组中，初始化时直接传给Datatable，避免浏览器先渲染全量DOM：

// 全量数据存在JS变量中
const allData = [
  ['行1列1', '行1列2'],
  ['行2列1', '行2列2'],
  // 剩余所有数据
];

$('#你的表格ID').DataTable({
  data: allData,
  pageLength: 10
});

对应的HTML表格tbody初始保持为空即可。

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