DataTables加载数据时如何预显示表头、搜索筛选栏再展示完整表格

核心逻辑很简单：不要等API数据返回后再初始化DataTables，而是先用空数据集完成组件初始化，让表头、搜索栏、条目筛选器、分页控件第一时间渲染到页面，加载阶段只在表格内容区显示spinner，等接口返回数据后再灌入表格即可，完全不需要遮挡顶部组件。

• 第一步：提前写死HTML表格骨架，不要动态生成表头
  直接在HTML里把表格结构、表头列全部定义好，在tbody里预留加载提示的spinner行，注意colspan属性值要和表头列数一致，保证spinner占满整行：

  <table id="bizTable" class="table table-bordered" style="width: 100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>业务名称</th>
        <th>创建时间</th>
        <th>当前状态</th>
        <!-- 替换为你实际业务需要的表头列 -->
      </tr>
    </thead>
    <tbody>
      <tr id="tableLoadingTip">
        <td colspan="4" class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">数据加载中</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  

• 第二步：DOM加载完成后立刻初始化DataTables，传入空数据集
  初始化时关闭组件自带的全屏加载遮罩，避免遮挡已经渲染的控件，这一步执行完所有你需要的组件外壳就会全部显示：

  // DOM加载完成立刻执行初始化，不要等接口响应
  const tableIns = new DataTable('#bizTable', {
    data: [], // 初始传入空数据
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'create_time' },
      { data: 'status' },
      // 和表头一一对应的数据字段映射
    ],
    processing: false, // 关闭默认的全屏加载提示
    deferRender: true,
    // 其余你自己需要的配置，比如排序规则、语言包可以正常加
  });
  

• 第三步：初始化完成后发起API请求，拿到数据后替换加载提示、灌入表格
  直接调用DataTables原生的行添加方法插入数据即可，不需要手动操作DOM拼接表格行：

  async function fetchTableData() {
    try {
      // 替换为你自己的Django后端接口地址
      const resp = await fetch('/api/your_biz_list/');
      const result = await resp.json();
      // 移除加载提示行
      document.getElementById('tableLoadingTip')?.remove();
      // 批量插入数据并重绘表格
      tableIns.rows.add(result.data).draw();
    } catch (err) {
      // 异常场景替换提示文案
      document.querySelector('#tableLoadingTip td').innerHTML = '数据加载失败，请刷新页面重试';
    }
  }
  // 启动数据加载
  fetchTableData();
  

如果你用的是DataTables服务端分页模式（配置了serverSide: true），不需要自己手写fetch逻辑，只需要加deferLoading: 0配置项，自定义tbody内的加载提示替换默认遮罩即可，核心逻辑还是先渲染组件外壳、后加载数据。

小优化建议：数据加载阶段可以给搜索栏、筛选器加半透明样式，等数据加载完成后恢复不透明，避免用户提前操作无反馈。

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