Loading Datatables with a JSON file.
Loading Datatables with a JSON file.
Hi all, I know this has probably been asked a million times (just can't find a good example), but I've got a question about loading a JSON file into datatables. So my JSON file looks like so:
test.json
[code]
{
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
... (and so on and so forth)
}
[/code]
I want to take this hash and just throw it in my dataTable, but I apparently have no idea how to do this... I first was making an AJAX call and grabbing the JSON file, then looping through each key and adding them to the table, so let's say I did this:
[code]
var table = $('#example').dataTable({
'bAutoWidth': false,
'aoColumns': [{'sWidth': '100px', 'sTitle': 'Hash'}, {'sWidth': '100px', 'sTitle': 'Id'}, {'sWidth': 100px, 'sTitle': 'Value'}]
});
$.ajax({
dataType: 'JSON',
url: 'test.json',
async: false,
success: function(json) {
for (hash in json) {
for (i = 0; i < json[hash].length; i++) {
table.fnAddData([hash, json[hash][i][0], json[hash][i][1]]);
}
}
error: function() {
alert("failed!");
}
});
[/code]
But when my JSON file is massive, the browser just locks up, so I tried some recursive function way of updating the table, but that only provided race conditions... what I want to know is, is there an easier way of just plopping my data into the dataTable? I mean, there's got to be! I'm just overlooking something... and to note, I tried putting an aaData in front of all of my JSON file and then just using sAjaxSource, but that didn't seem to work... it looked like this though:
[code]
{aaData: {
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
... (and so on and so forth)
}}
[/code]
Any help would be appreciated. Thanks!
**Edit, it's also good to say I looked at the example given, but it doesn't really help out much because I don't know what your txt file looks like. I think it'd be helpful to post an example of how that should look.
test.json
[code]
{
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
... (and so on and so forth)
}
[/code]
I want to take this hash and just throw it in my dataTable, but I apparently have no idea how to do this... I first was making an AJAX call and grabbing the JSON file, then looping through each key and adding them to the table, so let's say I did this:
[code]
var table = $('#example').dataTable({
'bAutoWidth': false,
'aoColumns': [{'sWidth': '100px', 'sTitle': 'Hash'}, {'sWidth': '100px', 'sTitle': 'Id'}, {'sWidth': 100px, 'sTitle': 'Value'}]
});
$.ajax({
dataType: 'JSON',
url: 'test.json',
async: false,
success: function(json) {
for (hash in json) {
for (i = 0; i < json[hash].length; i++) {
table.fnAddData([hash, json[hash][i][0], json[hash][i][1]]);
}
}
error: function() {
alert("failed!");
}
});
[/code]
But when my JSON file is massive, the browser just locks up, so I tried some recursive function way of updating the table, but that only provided race conditions... what I want to know is, is there an easier way of just plopping my data into the dataTable? I mean, there's got to be! I'm just overlooking something... and to note, I tried putting an aaData in front of all of my JSON file and then just using sAjaxSource, but that didn't seem to work... it looked like this though:
[code]
{aaData: {
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
... (and so on and so forth)
}}
[/code]
Any help would be appreciated. Thanks!
**Edit, it's also good to say I looked at the example given, but it doesn't really help out much because I don't know what your txt file looks like. I think it'd be helpful to post an example of how that should look.
This discussion has been closed.
Replies
Prior to 1.8, DataTables just wants a simple 2-D array, so if you did:
[code]
[
[hash1, 1, "value1"]
[hash2, 2, "value2"]
...
]
[/code]
passing something like that to addData should work just fine.
1.8 lets you do some fancier stuff, but even then, I think you would still have to change your json object a bit
And what I'd like to know is... why does iterating through the JSON object and adding to the table lock up the browser? It only happens for bigger JSON files, but still, I feel like it shouldn't be that big of a deal. And I know it's the whole table.fnAddData bit because if I comment that out, it's fine... So what I'm doing is:
[code]
var i;
var len;
var obj = new Object();
var name;
var update = function() {
if (i < len) {
table.fnAddData([name, obj[i][0], obj[i][1]]);
i++;
setTimeout(update, 100);
}
};
$.ajax({
dataType: 'JSON',
async: false,
url: 'test.json',
success: function(json) {
for (hash in json) {
name = hash;
obj = json[hash];
len = obj.length;
i = 0;
setTimeout(update, 100);
}
}
});
[/code]
I know I'm doing some risky things here, but it's really the only way I can think of, but like I said, I run into race conditions... it always just gives me the last hash and its values.
In your above code, why have you got a setTimeout? That shouldn't be needed. Is that to stop the browser locking up? How large is your data set? It might be worth looking at deferred rendering to speed things up.
Allan
[code]
{
aaData: [
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
hash3: [[5, "value5"], [6, "value6"]]
]
}
[/code]
Yeah, so the setTimeout was in place to give the browser a "breath" for each load, and hopefully to kind of make the loop go slower because as of right now, my last hash key + its data is the only thing that's being loaded into the dataTable, which is why I think I have a race condition. So using my example above, only hash3 would be loaded into the dataTable.
The one JSON file that I'm working with is about 500kb, but it could definitely go higher than that. And how do I do deferred rendering? I would definitely give that a try.
"bDeferRender": true
Allan
Allan