2015-06-11 85 views
0

我目前拉動JSON手動與一個自舉表測試,但需要能夠從外部文件中提取,類似我怎麼在這裏做什麼:從外部文件中提取JSON數據與阿賈克斯

$(document).ready(function() { 
     $('#content').dataTable({ 
      "ajax": 'test.log' 
     }); 
    }); 

我目前手動設置數據,並通過像這樣的循環:

$(document).ready(function() { 
    var json = [{"data":{ 
     "Account": "1234", 
      "Domain": "domain.com", 
     "PlayerClass": "Player"}, 
     "level": "info", 
     "message": "", 
     "timestamp": "2015-06-11T15:11:03.425Z" 
    }, 
       {"data":{ 
     "Account": "4567", 
      "Domain": "domain.com", 
     "PlayerClass": "Player"}, 
     "level": "info", 
     "message": "", 
     "timestamp": "2015-06-11T15:11:03.425Z" 
    }]; 
    var tr; 
    for (var i = 0; i < json.length; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td>" + json[i].data.Account + "</td>"); 
     tr.append("<td>" + json[i].data.Domain + "</td>"); 
     tr.append("<td>" + json[i].timestamp + "</td>"); 
     $('table').append(tr); 
    } 
}); 

顯然以前使用Ajax正在申請數據表,所以我要麼需要寫它只是套用.each()循環,或扔到一個DataTable中。

JSFIDDLE

回答

1

正確方法當前版本中加載上面顯示的格式的數據是使用下面的數據表初始化選項:

$('#example').DataTable({ 
    "ajax": { 
     "url": "test.log", 
     "dataSrc": "" 
    }, 
    "columns": [ 
     { "data" : "data.Account" }, 
     { "data" : "data.Domain" }, 
     { "data" : "timestamp" } 
    ] 
}); 

既然你在使用Objects您數據,因此您需要使用columns.data將對象屬性與表列匹配。可以使用虛線符號(例如,data.Account)來引用對象屬性。

此外,ajax.dataSrc選項設置爲空字符串,表明你的JSON數據是數組。

this JSFiddle示範。請注意,該示例使用mockjax庫來模擬通過Ajax加載JSON文件,僅用於演示目的。在url選項中使用實際文件的URL。

+0

這是朝着正確的方向發展,但我需要能夠從文件中加載json,而不是硬編碼到'responseText'中。 – Matt

+0

@Matt,JSFiddle示例使用'mockjax'庫來模擬通過Ajax加載JSON文件,僅用於演示目的。在URL選項中使用實際文件的URL。 –

+0

我現在正在工作,但它奇怪地在json中的每一行添加空白行,當調用像這樣: 「ajax」:「test.log」, 「columns」:[''' {「data」 「帳戶」},{ 「數據」:「域」} ] – Matt