Move row from one table to another (and then select the new one with jQuery)

dsnap

I've got two tables. I need to copy each row from one table, place it into the second table, delete the row from the first table, and then, change the name of a hidden input.

I've got the whole adding and removing rows working no problem (though it could probably be streamlined). Can anybody help with the last bit?
Also, feel free to make fun of me for doing something stupid (I have no idea what I'm doing).
[code]
$('#addAll').click(function() {
accountTable = $('#accountUsersTable').dataTable();
groupTable = $('#groupMembersTable').dataTable();

accountTable.$('tbody tr').each(function() {
var userData = accountTable.fnGetData(this);
var newRowO = groupTable.fnAddData( [
userData[0],
userData[1],
userData[2],
userData[3]
]);
var newRow = groupTable.fnSettings().aoData[newRowO[0]].nTr;
$('#groupMembersTable').find($(newRow)).children("input").attr("name", "addRow[]");
accountTable.fnDeleteRow(this);
});
});
[/code]

dsnap

This works. Gets real slow, real fast thought. Would love some brighter ideas.
[code]
$('#addAll').click(function() {
accountTable = $('#accountUsersTable').dataTable();
groupTable = $('#groupMembersTable').dataTable();

accountTable.$('tbody tr').each(function() {
var userData = accountTable.fnGetData(this);

groupTable.fnAddData( [
userData[0],
userData[1],
userData[2],
userData[3]
]);

$('#groupMembersTable tbody tr').each(function() {
var cells = $(this).find('td');
if ($(cells[2]).html() === userData[2]) {
$(this).find("input").attr("name", "addRow[]");
}
});
accountTable.fnDeleteRow(this);
});
});
[/code]

allan

Its getting really slow because each time around the loop (i.e. each row), both fnAddData and fnDeleteRow are redrawing their tables (including a resort, refilter etc).

Each has the option to not redraw the table (see the API docs) - I'd suggest doing that and simply redrawing each one ( fnDraw ) after the loop. Much much faster.

Allan

dsnap

Thanks, Allan. That does speed it up considerably, however, I lose the ability to change the input's name attribute.

Would it make more sense for me to update the input before I send it to the other table?

How would I use fnUpdate to update the input?

dsnap

Ended up doing this.

Still takes forever...
[code]
$('#addAll').click(function() {
accountTable = $('#accountUsersTable').dataTable();
groupTable = $('#groupMembersTable').dataTable();

accountTable.$('tbody tr').each(function() {
var userData = accountTable.fnGetData(this);
var $element = $(userData[3]);
$element.filter('input').prop('name', function(i, v) {
return 'addRow[]';
});

groupTable.fnAddData([
userData[0],
userData[1],
userData[2],
$element.wrapAll('').parent().html()
], false);
accountTable.fnDeleteRow(this, false);
});
accountTable.fnDraw();
groupTable.fnDraw();
});
[/code]

Is there a dataTables function that'll allow me to just set table a = table b. then empty table b?

dsnap

The clouds opened and a voice said, "what the hell are you doing?! do this, stupid," and all of my problems were solved.
[code]
$('#addAll').click(function() {
accountTable = $('#accountUsersTable').dataTable();
groupTable = $('#groupMembersTable').dataTable();

groupTable.fnAddData(accountTable.fnGetData());
accountTable.fnClearTable();

$('#groupMembersTable tbody tr').each(function() {
$(this).find("input").attr("name", "addRow[]");
});
});
[/code]