2017-07-11 1 views
1

ドキュメント準備関数でjQuery Datatableをロードしていますが、Ajaxレスポンスから表の本文行を作成していますが、まだデータが表示されておらず、並べ替えやカウントも行われていません。Ajaxレスポンスから動的に作成された行にJquery DataTableをロードするには?

<table id="mytable">     
    <thead>     
    <th>Name</th> 
    <th>Email</th> 
    </thead> 
    <tbody id="tableBody"></tbody> 
</table> 
function getUsers(){ 
    $.ajax({ 
    url: "/user.php", 
    type: 'POST', 
    dataType: 'json', 
    success: function(json) {    
     var tr; 
     for (var i = 0; i < json.length; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td><a>" + json[i].first_name + ' ' + json[i].last_name + "</a></td>"); 
     tr.append("<td><a href='mailto:" + json[i].email + "'>" + json[i].email + "</a></td>"); 
     $("#mytable > tbody").append(tr);      
     } 
    }, 
    }); 
} 

$(document).ready(function() { 
    getUsers(); 
    $('#mytable').dataTable(); 
}); 

答えて

0

それはあなたのために働くだろう

function getUsers(){ 
    $.ajax({ 
     url: "/user.php", 
     type: 'POST', 
     dataType: 'json', 
     success: function(json) { 
      var tr; 
      for (var i = 0; i < json.length; i++) { 
       tr = '<tr>'; 
       tr+="<td><a>"+json[i].first_name +' '+json[i].last_name+"</a></td>"; 
       tr+="<td><a href='mailto:"+ json[i].email +"'>"+ json[i].email + "</a></td>"; 
       tr+='</tr>'; 
       $("#tableBody").append(tr); 
      } 

     }, 
    }); 
} 

私の事、この機能を試してみてください。

+0

はい私はこれを試しましたが、動作しません。ですから、私はこれを別のメソッド、つまりdynamicllyで作成した行に書き、次にajaxの成功を呼びました。その下に私は$( '#mytable')を呼び出しました。dataTable();それは働いた。 – ParminderBrar

+0

よかったよ。 –

+1

私はこの '$("#tableBody ").append(tr);'をforループの内側に置いています –

関連する問題