如何在通过JavaScript注入数据前重绘Datatable以清除无数据提示

我需要搭建一个用于留存上传文件历史记录的表格，每当我通过JS向表格注入数据进行更新时，表格中仍会显示No data available in table的提示行。

我已尝试过其他相关问题提供的解决方案，但均未生效。
恳请大家提供帮助，万分感谢。

解决方案 #

这个问题的核心原因是DataTables初始化后会维护独立的内部数据源缓存，直接通过原生JS或jQuery修改表格DOM结构不会同步更新DataTables的内部数据源，因此组件仍会判定当前无数据，保留空数据提示。
你可以根据自己的使用场景选择以下任意一种方案修复：

• 方案1：使用DataTables官方API操作数据（推荐）
  初始化表格时保存实例，后续所有数据新增、修改、删除操作全部通过实例API完成，无需手动操作DOM：

  // 初始化时保存实例
  const fileHistoryTable = $('#你的表格ID').DataTable({
    // 填入你原有的表格配置
  })
  
  // 新增单行数据
  fileHistoryTable.row.add([
    '文件名示例',
    '2024-05-20 14:30',
    '上传成功',
    '操作按钮HTML内容'
  ]).draw()
  
  // 批量新增多条数据
  fileHistoryTable.rows.add([
    ['文件1.pdf', '2024-05-20 14:25', '上传成功', '操作HTML'],
    ['文件2.docx', '2024-05-20 14:28', '上传失败', '操作HTML']
  ]).draw()
  

• 方案2：同步现有DOM数据到DataTables缓存
  如果你已经通过JS完成了DOM表格的内容注入，可以调用API强制DataTables重新读取DOM内容更新内部缓存：

  // 先执行你原有手动注入DOM的代码
  // ...
  
  // 新增以下代码同步缓存并重绘表格
  fileHistoryTable.rows().invalidate('dom').draw()
  

• 方案3：全量更新前清空原有缓存
  如果是覆盖式全量更新表格数据，可以先清空内部缓存再执行后续操作：

  fileHistoryTable.clear()
  // 后续执行新增数据、注入DOM+同步缓存的操作
  

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