如何在 DataTables 初始化时阻塞表格渲染并显示加载动画

✅ 正确解法：双重控制 + 渲染时序编排

1. 强制初始隐藏 + 启用原生 processing 指示器

不要仅依赖 visibility: hidden 或 display: none 切换包装器，而应从根源阻止原始表格渲染：

2. CSS 增强：确保 loading 提示居中且覆盖

/* 替代原有 #loading-indicator 的复杂定位，复用 DataTables 自带结构 */
.dataTables_processing {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  padding: 15px 25px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 8px !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.dataTables_processing img {
  width: 48px;
  height: 48px;
  vertical-align: middle;
  margin-right: 12px;
}

3. 重构 D3 渲染逻辑：解耦并延迟执行

将 D3 图表代码封装为独立函数，并仅在 initComplete 中调用，避免因模板提前执行导致的 DOM 查找失败或渲染错位：

// ✅ 封装 D3 渲染逻辑
function renderD3Charts() {
  // 第一个图表
  const assign_level_rawData = JSON.parse('{{ assign_levels|safe }}');
  const data1 = assign_level_rawData.map(d => ({level_assign: d[0] === "N" ? "NA" : d[0], count: d[1]}));
  createChart(data1, "chart-level-assign", "Level of Assignment", "level_assign");

  // 第二个图表
  const edu_setting_rawData = JSON.parse('{{ edu_setting_levels|safe }}');
  const data2 = edu_setting_rawData.map(d => ({edu_setting: d[0] === "N" ? "NA" : d[0], count: d[1]}));
  createChart(data2, "chart-edu-setting", "Educational Setting", "edu_setting");

  // 第三个图表
  const smdCsv = "{{ smd_combined_csv|escapejs }}";
  const smd = d3.csvParse(smdCsv).filter(d => d.smd_value !== "NA");
  drawDotChart(smd);
}

// ✅ 移除原位置的 D3 脚本，统一由 initComplete 触发

4. 表单提交时的加载状态同步（可选增强）

若需在文件上传期间也显示全局遮罩（如防止重复提交），可结合 processing 和表单事件：

$('form').on('submit', function(e) {
  e.preventDefault();
  // 显示全局遮罩（用于上传阶段）
  $('#loading-indicator').show();

  // 提交表单（AJAX 或传统 POST）
  this.submit();
});

// 在 Django 视图返回后，页面重载时 DataTables 会自动触发 processing → initComplete 流程

⚠️ 注意事项

• 避免 visibility: hidden 陷阱：visibility: hidden 仍占据文档流，可能导致布局抖动；优先使用 display: none 隐藏原始 。
  initComplete 是黄金时机：它保证 DataTables 所有功能（分页、排序、按钮等）均已挂载完毕，是启动后续依赖操作（如 D3 渲染）的唯一可靠钩子。
  静态资源路径校验：确保 {% static "loading.gif" %} 在浏览器中可直接访问（检查 Network 面板），否则 language.processing 将显示空白。
  性能提示：对超大数据集（>10k 行），考虑启用服务器端处理（serverSide: true）+ AJAX，避免前端全量渲染压力。

  通过以上方案，你将获得：
  ✅ 原始表格全程不可见；
  ✅ 加载动画精准覆盖 DataTables 初始化全过程；
  ✅ D3 图表严格在表格完全就绪后渲染，动画流畅无干扰；
  ✅ 代码结构清晰，符合前端最佳实践。