Most Efficient Way to Load Table data?

tbone587

I have been working with the datatables for the best week for the first time and I am really likeing them so far, but there are obstacles that I need to cross. I currently have a hidden table that stores data that i need to load and remve from my data table. I have a series of checkboxes that when clickeed, will load data from the hidden table into the datatable. It works perfectly, however it gets pretty slow with a large set of data being imported. Is there a way to import the hidden table data directly? Or could I use a javascript array to be quicker? If the javascript way is a good choice, can someone provide the format?

allan

> however it gets pretty slow with a large set of data being imported

How are you doing it? Can you show us the code? Are you using fnAddData with a 2D array?

Allan

tbone587

I have multiple arrays with the same index, so I loop through one array and use fnAddData to add rows. Below is the code I am using. My browser almost freezes up with a large amount of data...:

[code]
//Update Table Data
counter = 0;
var groupIdLength = groupIdArray.length;

function UpdateTableData(groupId)
{
while (counter < groupIdLength)
{
if (groupId == "allusers")
{
//Insert Data into New Row
userDataTableList.dataTable().fnAddData([
checkBoxesArray[index],
groupIdArray[index],
groupNameArray[index],
typeArray[index],
userIdArray[index],
userNameArray[index]
]);
}

else
{
if (groupIdArray[index] == groupId)
{

//Insert Data into New Row
userDataTableList.dataTable().fnAddData([
checkBoxesArray[index],
groupIdArray[index],
groupNameArray[index],
typeArray[index],
userIdArray[index],
userNameArray[index]
]);
}
}
counter++;
}

//Make Column 1 Centered Again
resetFirstColumnCenter();
}
[/code]

allan

Calling fnAddData in a loop like that is going to cause it to redraw the table every single time you add a row - which will kill any browser. Use the second parameter for fnAddData to stop it doing a redraw.

Allan

tbone587

Holy smokes, I altered my code to the below snippet per your recommendation and it is speedy! Thank you!!

[code]
//Update Table Data
function UpdateTableData(groupId)
{
var col1data;
var col2data;
var col3data;
var col4data;
var col5data;
var col6data;
counter = 0;

if (groupId == "allusers")
{
while (counter < hiddenDataLength)
{
col1data = $("#checkboxData" + counter).html();
col2data = $("#groupIdData" + counter).html();
col3data = $("#groupNameData" + counter).html();
col4data = $("#userData" + counter).html();
col5data = $("#userNumberData" + counter).html();
col6data = $("#userNameData" + counter).html();

//Insert Data into New Row
userDataTableList.dataTable().fnAddData([
col1data,
col2data,
col3data,
col4data,
col5data,
col6data
],false);

counter++;
}
}

else
{
while (counter < hiddenDataLength)
{
col1data = $("#checkboxData" + counter).html();
col2data = $("#groupIdData" + counter).html();
col3data = $("#groupNameData" + counter).html();
col4data = $("#userData" + counter).html();
col5data = $("#userNumberData" + counter).html();
col6data = $("#userNameData" + counter).html();

if (col2data == groupId)
{
//Insert Data into New Row
userDataTableList.dataTable().fnAddData([
col1data,
col2data,
col3data,
col4data,
col5data,
col6data
],false);
}
counter++;
}
}
//Re-Draw Table
userDataTableList.fnDraw();

//Make Column 1 Centered Again
resetFirstColumnCenter();
}

[/code]

allan

:-)

Good stuff - thanks for the feedback!

Allan