用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