2017-05-26 17 views
0

私のサーバーからユーザーのデータを表示するためにテーブルを描画します。 最初に私は、ユーザーのデータを取得するためにAjexを使用しています:サーバーからデータを受信して​​もJQuery DataTableのデータが受信されない

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

私は成功し、ユーザーデータを取得し、JSON配列オブジェクトが含まれているようDATASET1内のデータを保存することができます。私は「/ユーザ」APIからユーザーデータを取得し、DATASET1にそれを保存することができますことを確信している

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

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

その後、私はテーブルを作成し、設定に渡します。その形式は次のようです。しかし、テーブルを含むページをロードするたびに、テーブルには常に「テーブルに利用可能なデータがありません」と表示されます。私はこの行にブレークポイントを設定しました:

var tableConfig={ 

実行し続けます。奇妙なことが起こる。表はデータを示しています...

答えて

0

の後に表を初期化すると、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のDataTableのはajaxオプションを使用してAjaxリクエストをやらせる必要があります。

+0

ありがとうございました。私はhttps://datatables.net/forums/discussion/26282/posting-json-with-built-in-ajax-functionalityを使用してAPIにデータを投稿し、DataTableはデータを正常に取得してテーブルをレンダリングできます。 –

関連する問題