What does the array look like after adding or deleting a row without re-drawing the table?

dsnap

I've got two tables. I've written a function that will, upon clicking a row, delete it from the current table then add it to the other table.
I started out trying to just use fnAddData and FnDeleteRow but on my tables, when they were in the thousands would take about 3 seconds to process after each click. That was less than convenient. So, I am trying to write a function that uses the fnAddData and FnDeleteRow without redrawing the tables and instead prepending/deleting the rows using jquery. Then, if the user decides to sort or filter the table gets redrawn, kicking out the jquery rows and uses the real rows.
http://live.datatables.net/ugihec/
The problem with this approach (modeled below) is that if a user clicks on a row in table one then click on the same row on table two (returning it to its original table) without doing any redraws actually sends the wrong row back to table one. I'm assuming it's because the count of the table is different from the count of the array. Bringing about my quesiton, what does the array look like after adding or deleting a row without re-drawing the table? Or, how could I delete/add a row in the array with some other method?
HTML
[code]



Col1
Col2




AAAAA
BBBBB


CCCCC
DDDDD






EEEEE
FFFFF




GGGGG
HHHHH


IIIII
JJJJJ



[/code]

JavaScript
[code]
$(document).ready(function() {
$('#one').dataTable();
$('#two').dataTable();

$('#one tbody').on("click", 'tr', function (e) {
oneTable= $('#one').dataTable();
twoTable= $('#two').dataTable();
var userData = oneTable.fnGetData(this);
oneTable.fnDeleteRow(this, removeRow(this), false);
var newRowAdding = twoTable.fnAddData([
userData[0],
userData[1]
],
false);

var newRow = twoTable.fnSettings().aoData[ newRowAdding[0] ].nTr;
newRow.setAttribute('class', 'changed');
addRow(this, '#two');
});

$('#two tbody').on("click", 'tr', function (e) {
oneTable= $('#one').dataTable();
twoTable= $('#two').dataTable();
var userData = twoTable.fnGetData(this);
twoTable.fnDeleteRow(this, removeRow(this), false);
var newRowAdding = oneTable.fnAddData([
userData[0],
userData[1]
],
false);

var newRow = oneTable.fnSettings().aoData[ newRowAdding[0] ].nTr;
newRow.setAttribute('class', 'changed');
addRow(this, '#one');
});
});
function removeRow(row) {
$(row).remove();
}
function addRow(row, table) {
$(table + ' tbody').prepend(row);

if (!$(newRow).hasClass('changed')) {
$(newRow).addClass('changed');
}
}
[/code]

dsnap

Nobody? I worked really hard on that live datatable :(

allan

> That was less than convenient. So, I am trying to write a function that uses the fnAddData and FnDeleteRow without redrawing the tables and instead prepending/deleting the rows using jquery

Although that might sound like a nice idea, you'd need to fully re-implement the filtering, sorting and paging (among other items) that DataTables will do.

Are you able to link us to a page which shows it running slow? That looks like it should run reasonably quickly. I would say that you could use bReferRender in this case which might give a small boost since nodes might not always be needed as soon as they are added.

Allan

dsnap

Thanks for getting back to me, Allan. I'll see if I can whip up a more accurate sample that doesn't have thousands of company email addresses in it :D