用AJAX调用填充数据表格

Question

我正在处理数据表。我需要用AJAX调用我的数据表，但我无法这样做。 这里是我的AJAX调用：

$('#call_analysis_basic_table').DataTable ({ 
    "ajax": { 
     "url": "getBasicCallAnalysisData.json", 
     "type": "POST" 
    }, 
    "columns": [ 
     { "data": "ANUMBER" }, 
     { "data": "BNUMBER" }, 
     { "data": "DATETIME" }, 
     { "data": "DURATION" }, 
     { "data": "IMEI" }, 
     { "data": "IMSI" }, 
     { "data": "CELL ID" }, 
     { "data": "OPR ID" }, 
     { "data": "MSC ID" }, 
     { "data": "FILE ID" } 
    ] 
}); 

DataTable的HTML代码：

<table id="call_analysis_basic_table" class="display" cellspacing="0" width="100%"> 
    <thead style="background-color:#4d7496;color:#fff;"> 
     <tr> 
      <th>aNumber</th> 
      <th>bNumber</th> 
      <th>datetime</th> 
      <th>duration</th> 
      <th>imei</th> 
      <th>imsi</th> 
      <th>cellID</th> 
      <th>oprid</th> 
      <th>msc_id</th> 
      <th>file_id</th> 
     </tr> 
    </thead> 
</table> 

预期JSON响应：

{ 
    "result": [ 
     [ 
      "3028540439", 
      "3222027076", 
      "2017-06-01 07:58:50.0", 
      "984", 
      "45113694289302", 
      "45113694289302", 
      "34546789606976", 
      "410-07-511-19601", 
      "1", 
      "1", 
      "1" 
     ], 
     [ 
      "3028540439", 
      "3224712938", 
      "2017-05-11 06:07:21.0", 
      "4", 
      "12962129644848", 
      "12962129644848", 
      "34469708781694", 
      "410-06-651-30213", 
      "1", 
      "1", 
      "1" 
     ] 
    ], 
    "success": true, 
    "error": "no error" 
} 

在进行此调用后，从服务器的响应来，但反应没有按”填充到数据表中。它让我这个错误

数据表警告：表ID = call_analysis_basic_table - 没有错误

任何暗示，我怎么能填充这个JSON回应我的数据表？

Answer 1

您不必在此处使用"columns"属性，因为您只是从数组中加载数据表，而不是从正确的JSON响应中加载数据表。你也有10列在表中，但每个阵列11项不会工作。如果使用数组填充表，则数组中的项目数应与表中的列数相同。 与下面的代码尝试 -

$('#call_analysis_basic_table').DataTable ({ 
    "ajax": { 
     "url": "getBasicCallAnalysisData.json", 
     "type": "POST" 
    } 
}); 

而且您的数据源阵列应该有如下 -

{ 
    "result": [ 
     [ 
      "3028540439", 
      "3222027076", 
      "2017-06-01 07:58:50.0", 
      "984", 
      "45113694289302", 
      "45113694289302", 
      "34546789606976", 
      "410-07-511-19601", 
      "1", 
      "1", 
      "1" 
     ], 
     [ 
      "3028540439", 
      "3224712938", 
      "2017-05-11 06:07:21.0", 
      "4", 
      "12962129644848", 
      "12962129644848", 
      "34469708781694", 
      "410-06-651-30213", 
      "1", 
      "1", 
      "1" //extra value is here 
     ] 
    ] 
} 

，你可以在你的HTML

<table id="call_analysis_basic_table" class="display" cellspacing="0" width="100%"> 
    <thead style="background-color:#4d7496;color:#fff;"> 
     <tr> 
      <th>aNumber</th> 
      <th>bNumber</th> 
      <th>datetime</th> 
      <th>duration</th> 
      <th>imei</th> 
      <th>imsi</th> 
      <th>cellID</th> 
      <th>oprid</th> 
      <th>msc_id</th> 
      <th>file_id</th> 
     </tr> 
    </thead> 
    <tfoot style="background-color:#4d7496;color:#fff;"> 
     <tr> 
      <th>aNumber</th> 
      <th>bNumber</th> 
      <th>datetime</th> 
      <th>duration</th> 
      <th>imei</th> 
      <th>imsi</th> 
      <th>cellID</th> 
      <th>oprid</th> 
      <th>msc_id</th> 
      <th>file_id</th> 
     </tr> 
    </tfoot> 
</table> 

检查此链接添加表尾为更多参考 Jquery datatable ajax with array