2017-08-24 76 views
0

我對數據表非常新。我需要用默認數據表響應以外的自定義響應填充數據表。請參閱fiddle。它使用簡單的響應正常工作,但現在我需要用更復雜的響應填充數據表。以下是我的代碼。使用自定義嵌套響應填充數據表

HTML

<table id="table" class="display responsive nowrap" cellspacing="0" width="100%"> 
    <thead style="background-color:#303641;color:#fff;"> 
     <tr> 
      <th>id</th> 
      <th>number</th> 
      <th>maxDate</th> 
      <th>minDate</th> 
      <th>number2</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

JAVASCRIPT

$(document).ready(function() { 
    var result = '{"msg":"success","code":"200","status":null,"data":[{"id":3663101,"lstImeis":[{"number":"18966399926043","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"32756451080799","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}],"draw":0,"limit":0,"recordsFiltered":0,"recordsTotal":0}'; 

    var json = JSON.parse(result); 
    var tableData = json.data; 

    $('#table').DataTable({ 
     "processing": true, 
     "serverSide": false, 
     "bFilter": false, 
     "aaData": tableData, 
     "aoColumns": [{ 
      "mData": "id" 
     }, { 
      "mData": "number" 
     }, { 
      "mData": "maxDate" 
     }, { 
      "mData": "minDate" 
     }, { 
      "mData": "number2" 
     }] 
    }); 


}); 

有了這個JSON響應,我無法填充在數據表中所需要的數據。我也創建了這個fiddle

我也研究了這個link,但我dopnt瞭解如何管理數據表中的嵌套響應。

任何想法,如何將這些數據填充到數據表中。 ?或者有什麼好的參考?

+0

您所遵循的示例與DataTable版本「1.10」相關,但您使用的是舊版DataTable。 – mmushtaq

+0

請檢查此[小提琴](http://jsfiddle.net/u0379d04/2/)它顯示'id'和'number2'值,但不是其他值? –

回答

0

好的,所以在google的一些幫助下,我設法顯示正確的響應,我用follwoiung java腳本代碼將我的數據填充到數據表中。

$(document).ready(function() { 
    var result = '{"msg":"success","code":"200","status":null,"data":[{"id":3663101,"lstImeis":[{"number":"18966399926043","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"32756451080799","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}],"draw":0,"limit":0,"recordsFiltered":0,"recordsTotal":0}'; 

    var json = JSON.parse(result); 
    var tableData = json.data; 

    $('#table').DataTable({ 
       "processing": true, 
      "serverSide": false, 
      "bFilter": false, 
      "aaData": tableData, 
       "aoColumns": [ 
         { "mData": "id" }, 
         { "mData": "lstImeis.0.number" }, 
         { "mData": "lstImeis.0.maxDate" }, 
         { "mData": "lstImeis.0.minDate" }, 
         { "mData": "number2" } 
       ], 

      }); 


}); 

我希望它能幫助別人!