即使从服务器接收到数据，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请求。