如何让DataTable每页显示固定行数（不足时补空白行）

要让所有页面都显示设置的每页行数，剩余位置用空白行填充，可按以下两种方式实现：

客户端数据初始化前补全 #

如果是通过JS数组传递数据，先计算需要补充的空白行数，再将空行数据追加到原始数据中：

// 原始数据示例
let originalData = [
  { col1: '数据1', col2: '内容1' },
  { col1: '数据2', col2: '内容2' },
  { col1: '数据3', col2: '内容3' },
  { col1: '数据4', col2: '内容4' },
  { col1: '数据5', col2: '内容5' }
];
const pageLength = 4;
// 计算需补充的空白行数
const fillCount = pageLength - (originalData.length % pageLength);

// 仅当数据不是整页倍数时补行
if (fillCount !== pageLength) {
  for (let i = 0; i < fillCount; i++) {
    // 根据表格列数生成空行数据，这里适配2列的情况
    originalData.push({ col1: '', col2: '' });
  }
}

// 初始化DataTable
$(".data-table").DataTable({
    data: originalData,
    lengthMenu: [ [4, 10, 25, 50, -1], [4, 10, 25, 50, "All"] ],
    pageLength: pageLength
});

HTML表格直接补全空白行 #

如果是通过HTML表格结构初始化，直接在<tbody>中补充对应数量的空白<tr>即可：

<table class="data-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 原始5条数据行 -->
    <tr><td>数据1</td><td>内容1</td></tr>
    <tr><td>数据2</td><td>内容2</td></tr>
    <tr><td>数据3</td><td>内容3</td></tr>
    <tr><td>数据4</td><td>内容4</td></tr>
    <tr><td>数据5</td><td>内容5</td></tr>
    <!-- 补充3个空白行，凑够每页4条的总页数要求 -->
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

初始化代码保持你原来的配置即可：

$(".data-table").DataTable({
    lengthMenu: [ [4, 10, 25, 50, -1], [4, 10, 25, 50, "All"] ],
    pageLength: 4
});

注意事项 #

• 空白行的列数要和表格实际列数保持一致，避免布局错乱
• 如果列有自定义渲染逻辑，需确保空行数据能适配渲染规则

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