使用Datatables从URL获取Map对象数据时出错求助

错误原因 #

• 数据结构与columns配置不匹配：你将接口返回的对象转成了二维数组employeeArray，但初始化Datatables时columns配置用了对象字段名（比如{ data: 'name' }），这是错误的——二维数组对应的columns应该使用索引（比如{ data: 0 }）或者不指定data让Datatables按顺序匹配。
• 缺少salary字段数据：你的表格列包含Salary，但转换数组时没有添加该字段的值，导致Datatables无法找到对应数据。
• 不必要的数组转换：接口返回的本身是对象数组，无需转成二维数组，直接使用对象数组更符合Datatables的配置习惯。

修正方案（两种可选） #

方案1：保持二维数组格式，调整columns配置

如果坚持用二维数组，需要修改columns配置为索引匹配，同时补充salary字段的数据（如果接口没有返回salary，可以设为空值）：

<html>
<head>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var employeeArray = []; 
      
      $.getJSON('https://run.mocky.io/v3/3a65891c-84c8-467e-b2e9-ecb1629e1c45', function(json_data){
        $.each(json_data, function(k, v) {
          var tem_arr = [] ; 
          tem_arr.push(v['name']);
          tem_arr.push(v['position']);
          tem_arr.push(''); // 补充salary字段，接口无返回则设为空
          tem_arr.push(v['office']);
          tem_arr.push(v['extn']);
          tem_arr.push(v['start_date']);
          employeeArray.push(tem_arr);
        });
        
        $('#example').DataTable({
          data: employeeArray, 
          columns: [
            { data: 0 }, // 对应数组第0位：name
            { data: 1 }, // 对应数组第1位：position
            { data: 2 }, // 对应数组第2位：salary
            { data: 3 }, // 对应数组第3位：office
            { data: 4 }, // 对应数组第4位：extn
            { data: 5 }, // 对应数组第5位：start_date
          ],
        });
      });
    });
  </script>
</head>
<body>
  <div class="container">
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

方案2：直接使用对象数组（更推荐）

接口返回的本身是对象数组，无需转成二维数组，直接使用原数据并匹配columns的字段名即可，同时补充salary字段的默认值：

<html>
<head>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $.getJSON('https://run.mocky.io/v3/3a65891c-84c8-467e-b2e9-ecb1629e1c45', function(json_data){
        // 给每个对象补充salary字段（接口无返回则设为空）
        json_data.forEach(item => {
          item.salary = '';
        });
        
        $('#example').DataTable({
          data: json_data, 
          columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'salary' },
            { data: 'office' },
            { data: 'extn' },
            { data: 'start_date' },
          ],
        });
      });
    });
  </script>
</head>
<body>
  <div class="container">
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Salary</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

关键说明 #

• 当使用二维数组作为data时，columns需通过索引（0、1、2...）对应数组的每一项；
• 当使用对象数组作为data时，columns通过字段名（如name、position）对应对象的属性；
• 表格列的数量必须与data中每一项的字段/元素数量一致，否则会出现数据不匹配或报错。

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