如何修复DataTable加载API数据时提示无数据及初始化语法报错问题

问题根因 #

1. 语法错误原因 #

你把$("#datatable").DataTable()写在了append()方法的参数括号内，没有正确闭合append()的入参，JS解析时识别为你给append传了两个参数（模板字符串+初始化语句）但语法结构不对，所以抛出缺少右括号的错误。同时你把初始化语句写在循环内，会导致每插入一行就重复初始化一次表格，后续也会触发DataTable重复初始化的报错。

2. 「有数据仍显示无数据提示」原因 #

你的table标签自带datatable-init类，页面加载时框架会自动初始化DataTable实例，此时接口还没返回数据，tbody是空的，DataTable内部缓存的数据集为空。后续你手动向DOM append tr元素时，DataTable不会主动识别DOM的变动，所以还是会保留原始的无数据提示。

修复方案 #

第一步：修改HTML代码 #

移除table标签的datatable-init类，避免页面加载时自动初始化DataTable：

<div class="nk-block nk-block-lg">
  <div class="nk-block-head">
    <div class="nk-block-head-content">
      <h4 class="nk-block-title">Data </h4>
      <div class="nk-block-des">
        <p>Policy</p>
      </div>
    </div>
  </div>
  <div class="card card-preview">
    <div class="card-inner">
      <!-- 移除datatable-init类 -->
      <table class="table" id="datatable">
        <thead>
          <tr>
            <th>#</th>
            <th>Module</th>
            <th>Policy & Terms of Services Details</th>
          </tr>
        </thead>
        <tbody id="dataDetails">
        </tbody>
      </table>
    </div>
  </div>
  <!-- .card-preview -->
</div>
<!-- nk-block -->

第二步：修改JS代码 #

先拼接完所有行的DOM再一次性插入，最后再初始化DataTable，避免循环内重复操作：

let cnt = 1;
$(document).ready(function() {
  getList();
})

const getList = () => {
  axios.get(`${url}getList`)
    .then(function(res) {
      if (res.data.status == 'success') {
        let htmlStr = '';
        res.data.result.map((e) => {
          if (e.role_id == '3') {
            htmlStr += ` 
              <tr>
                <td>${cnt++}</td>
                <td>${e.name}</td>
                <td><a href="javascript:void(0);"  onclick="detail('${e.id}')">${e.title}</a></td>
              </tr>
            `;
          }
        })
        // 一次性插入所有行
        $("#dataDetails").html(htmlStr);
        // 初始化前先判断是否已存在实例，避免重复初始化报错
        if ($.fn.DataTable.isDataTable('#datatable')) {
          $('#datatable').DataTable().destroy();
        }
        $("#datatable").DataTable();
      }
    })
}

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