JQuery DataTable-Daten nicht verfügbar, auch wenn Daten vom Server empfangen werden

Question

Ich möchte eine Tabelle erstellen, um Benutzerdaten von meinem Server anzuzeigen. Zuerst habe ich Ajex bin mit dem Benutzer Daten zu erhalten:

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; 
     } 
    } 
}); 

Ich kann erfolgreich die Nutzer Daten erhalten und die Daten in dataSet1 speichern als ein JSON-Array Objekte enthält. Das Format ist wie folgt:

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

Dann erstelle ich eine Tabelle und übergeben Sie in der Konfiguration:

// 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); 

Ich bin sicher, dass ich es Benutzern, Daten von API „/ Benutzer“ und in dataSet1 speichern bekommen . Aber jedes Mal, wenn ich die Seite mit der Tabelle lade, zeigt die Tabelle immer "Keine Daten in der Tabelle verfügbar" an. Ich setze einen Haltepunkt auf dieser Linie:

var tableConfig={ 

und lassen Sie es weiter laufen. Die seltsamen Dinge passieren. Die Tabelle zeigt die Daten .............. Keine Idee warum

Answer 1

Sie sollten Ihre Tabelle initialisieren nach erhalten Sie Antwort vom Server in der success Funktion. Verwenden Sie auch destroy für den Fall, dass Sie Ihre Ajax-Anfrage mehrmals durchführen.

Zum Beispiel:

$.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); 
    } 
}); 

jedoch im Idealfall sollten Sie jQuery Tables lassen Sie die Ajax-Anfrage mit ajax Option.