2016-11-21 17 views
2

DataTables ajaxを使用してテーブルを塗りつぶしています。私はthis exampleに従っていましたが、jsonがその例のように見える場合は動作しますが、私の 'data'はjsonの入れ子オブジェクトであり、jsonから値を取得できないためテーブルを埋めることができません。ネストされたデータのDataTables ajax

このJSON作品:

{ 
    "data": [ 
     {"id": "myid1", "name": "name1"}, 
     {"id": "myid2", "name": "name2"} 
     ] 
} 

をしかし、私のJSONは次のようになり、それが(最初JSONで動作します)私のhtmlです

{ 
"result": { 
    "data": [ 
     {"id": "myid1", "name": "name1"}, 
     {"id": "myid2", "name": "name2"} 
     ] 
    } 
} 

を動作しません:

<table id="myTable" class="tabletable-bordered dataTable"> 
    <thead> 
     <tr>     
      <th>name</th> 
      <th>id</th> 
     </tr> 
    </thead> 
    <tbody> 
     <td></td> 
     <td></td> 
    </tbody> 
</table> 

それは私のjsです:

$('#myTable').DataTable({ 
     "ajax": "/names", 
     "processing": true, 
     "dataSrc" : "result.data", 
     "columns": [ 
      { "data": "name" }, 
      { "data": "id" } 
     ] 
    }); 

ご覧のとおり、dataSrcresult.dataに設定してネストされたdataにアクセスしようとしましたが、表には何も表示されません。

私はjsonレスポンスのフォーマットを変更できません。このjsonでDataTables ajaxを使用することができない場合は、ご存じでしょうか?ありがとう! (私のポストへの答えを取得する前に)最後に


MY SOLUTION

私は最初のAJAX呼び出しを行うと、その後の成功の上に、私は私のDataTableを作成し、以下の溶液を用いて行きました。

ので、私はこれだけに私のJSを変更:私は私自身のAjax機能を実装して

$.ajax({ 
    type: "GET", 
    url: '/names', 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function (data) { 
     var myData = data.result.data; 
     $('#myTable').DataTable({ 
      "data": myData, 
      "columns": [ 
        { "data": "id" }, 
        { "data": "name"}, 
      ] 
      }); 
    } 
}); 

答えて

4

私は、より複雑な処理要件を持っていたが、私はあなたがこれで逃げることができると思う:

$('#myTable').DataTable({ 
    "processing": true, 
    "ajax": { 
    "url": "/names", 
    "dataSrc" : function(jsonObj) { 
     // Just being safe here 
     if(!jsonObj.results || !json.results.data) { 
      return []; 
     } 

     return jsonObj.results.data;  
    } 
    }, 
    "columns": [ 
    { "data": "name" }, 
    { "data": "id" } 
    ] 
}); 

これは参考になります:https://datatables.net/reference/option/ajax

関連する問題