即使從服務器接收到數據，JQuery DataTable數據也不可用

Question

我想繪製一張表格向我的服務器顯示用戶數據。 首先我AJEX使用來獲取用戶數據：

var usersList = {}; 
usersList.users = ["Afthieleanmah", "Hadulmahsanran","tabletest1"]; 
var dataSet1=[]; 
var i; 

$.ajax({ 
    url: '../users', 
    type: 'POST', 
    contentType: 'application/json', 
    cache: false, 
    data: JSON.stringify(usersList), 
    success:function(response, text){ 
     if(response.users !== undefined){ 
      dataSet1 = response.users; 
     } 
    } 
}); 

我能順利拿到用戶數據，並保存在dataSet1的數據作爲JSON數組包含對象。它的格式是這樣的：

[ 
     { 
      username: "Tiger Nixon", 
      job_title: "System Architect", 
      city: "Edinburgh", 
      extn: "5421" 
     }, 
     { 
      username: "Tiger Nixon2", 
      job_title: "System Architect", 
      city: "Edinburgh", 
      extn: "5421" 
     } 
    ] 

然後，我創建一個表，並傳遞配置：

// table confirgurations 
var tableConfig={ 
    pageLength: 5, 
    bLengthChange: false, 
    columns:[ 
     {data: "username", title: "Name"}, 
     {data: "job_title", title: "Position"}, 
     {data: "city", title: "City"} 
    ], 
    data:dataSet1 
}; 

// create table 
var userTable=$('#table-id').DataTable(tableConfig); 

我相信，我可以從API用戶數據「/用戶」，並將其保存到dataSet1的。但每當我加載包含表格的頁面時，表格總是顯示「表格中沒有可用的數據」。我在這條線上設置了一個斷點：

var tableConfig={ 

並讓它繼續運行。奇怪的事情發生。該表顯示數據..............不知道爲什麼

Answer 1

您應該在之後初始化您的表您在success函數中從服務器收到響應。如果您多次執行Ajax請求，也可以使用destroy。

例如：

$.ajax({ 
    // ... skipped ... 
    success:function(response, text){ 
     if(response.users !== undefined){ 
      dataSet1 = response.users; 
     } 

     // table confirgurations 
     var tableConfig={ 
      // ... skippped ... 
      destroy: true 
     }; 

     // ... skippped ... 

     var userTable=$('#table-id').DataTable(tableConfig); 
    } 
}); 

但是最好你應該讓jQuery的數據表做使用ajax選項Ajax請求。