AJAX loading XML fast, but adding the data as rows takes 3 minutes

kevin1293909

I am working on a project where I am making a datatable with 2000+ rows. I am using AJAX to get the data as XML and am then am making a row with 9 columns. Each column's data is created by finding the ID (a unique ID like x-x-x-x-x-x-x-x-x) from the XML and splitting the ID using variable= id.split("-");. 9 new variables are then created and each one is added to its own column in the row. It does this for each row and takes over 3 minutes to be able to view the 2000+ row datatable with data. I have used the chrome debugger and am finding that the XML data is actually coming back in less than two seconds and the problem is actually coming from creating the rows. Any ideas on a good way to create the table other than using fnAddData?

kevin1293909

I was using scroller and having this problem, however if I turn scroller off it takes less than 10 seconds for the whole table to be generated.

ignignokt

Just curious, how often does the XML data change that you are loading the table with? Seems like there might be a better solution. For example, if the data is updated once per day then you could put the XML data into your database, then use server-side processing and display/search the table instantly.

john_l

What's generating the XML? If it's a web service, see if you can change it to instead generate it in JSON format, and then you can feed that directly into the datatable in one block when you initialize it.

allan

Can you please link to the page showing the issue, or at least show the code you are using?

My guess, based on your note about using fnAddData is that the table is being redrawn once for every new row. Use the second parameter of fnAddData to stop it doing that. Or if you are using DataTables 1.10+ use the new API rows.add() to add multiple rows in a single call.

Allan

kevin1293909

Thanks all for the suggestions. I unfortunately am not able to post a link or source code, however I have discussed storing the data as JSON with a back-end developer and are hoping that helps. I have tried to use the rows.add() API, but don't see it as a good fit for what I am doing, but maybe you can help with that. I am currently using AJAX data and getting the data through an built in house method but am finding the parent node (which I will call loc - the x-x-x-x-x-x-x-x-x). I am storing each variable, loc, to locs variable and am then calling locs.each(index, loc) and then splitting each indexed loc by ("-") and storing those strings to individual variables that will be stored into the columns. after I've added all variables to an array, I then am using fnAddData. With the rows.add() example it appears that everything is hardcoded and I am not sure how I can use it with variables that are iterated over for each row.

kevin1293909

Also to answer ignignokt: The XML is not necessarily updated once a day, however it could be updated numerous times in one day depending on its use/needs

allan

Can you at least show us how you are using fnAddData please?

Allan

kevin1293909

Yes here is the basic structure of how I am creating each row for the table.

myTable.fnClearTable();

$xml= $( data );

rowCtr = 0;

var $locs = $xml.find("loc");

$locs.each(function(index, location) {

var $loc = $(loc);

var lineId = $loc.children("locid").text();

var strLocId = $loc.children("locid").text();

var arrLocId = strLocId.split("-");

var 0 = arrLocationId[0],

1 = arrLocationId[1],

2 = arrLocationId[2],

3 = arrLocationId[3],

4 = arrLocationId[4],

5 = arrLocationId[5],

6 = arrLocationId[6],

7 = arrLocationId[7],

8 = arrLocationId[8];

var addData = [];

addData.push('<td><input type="checkbox" id="'+lineId+'"/></td>');

addData.push(0);

addData.push(1);

addData.push(2);

addData.push(3);

if (4 == undefined) {

addData.push("")

} else {

addData.push(4);

}
if (5 == undefined) {

addData.push("")

} else {

addData.push(5);

}

if (6 == undefined) {

addData.push("")

} else {

addData.push(6);

}

if (7 == undefined) {

addData.push("")

} else {

addData.push(7);

}

if (8 == undefined) {

addData.push("")

} else {

addData.push(8);

}

addData.push("<td class='controls'><a class='delete' id='"+lineId+"'>Delete</a><input type='hidden' id='"+lineId+"' value='false'></td>");

rowCtr++;

myTable.fnAddData(addData);
});

allan

Good - so my original guess was spot on:

My guess, based on your note about using fnAddData is that the table is being redrawn once for every new row. Use the second parameter of fnAddData to stop it doing that.

Allan

kevin1293909

Am I simply saying "fnAddData": false?

kevin1293909

Figured it out. This page helps a lot for anyone else experiencing this problem: http://datatables.net/forums/discussion/18051/fnadddata-very-slow

Alan is the man!