.fnAddData removing columns classes

stanmancan

I'm trying to move rows between two tables. I'm using the following code below, but whenever the row gets added to the new table all of my 's are missing their custom classes. This is a problem as it effects the display and formatting of the data.

Any idea why the classes are being removed?
[code]
var table = $(this).closest("table");
var track = $(this).closest("tr");

var sourceTable = table.dataTable();
var completedTable = $("#tracks_outstanding").dataTable();
var row = track.get(0);
var addElement = sourceTable.fnGetData(row);

sourceTable.fnDeleteRow(sourceTable.fnGetPosition(row));
completedTable.fnAddData(addElement);
[/code]

This is the code of the row _before_ it's been moved:
[code]

18-OCT-13


[/code]

This is the markup _after_ it's been moved:
[code]

18-OCT-13


[/code]

stanmancan

After some investigating it appears that fnGetData/fnAddData do not copy the whole row over, they copy the content of each column and recreate it at the destination table. I believe the new question now should be "Is there a way to copy a row between tables verbatim?"

allan

Yes there should be. In DataTables 1.9- there isn't, in DataTables 1.10+ there is :-)

If you are feeling brave and want to give it a go, grab the latest dev code from: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js and then use the new api:

[code]
var table = $('#myTable').DataTable();

table.row.add( copiedRow );
[/code]

where `copiedRow` is your TR element to copy into place. Note that capital `D` in the DataTable initialisation - that will give you the new API object.

I haven't tried this myself yet, so would be interested to know how you get on. It should work...

Allan

stanmancan

Should most of my code port over alright, or will it require rewriting all of our code?

stanmancan

So I've tried the following to no success:

[code]
var destination = $("#tracks_outstanding").DataTable();
destination.row.add(td.closest("tr"));
[/code]

No errors, but the row certainly does not get added to the new table either.

allan

Serves me right - I should have built an example first! DT 1.10 does work correctly, but my code above was missing a call to `draw()` to redraw the table with the new data - hod.

Here is a running example where you can click on a row in each table to transfer it to the other:
http://live.datatables.net/exavar/edit

[code]
$(document).ready(function() {
var t1 = $('#t1').DataTable();
var t2 = $('#t2').DataTable();

$('#t1 tbody').on( 'click', 'tr', function () {
t1.row( this ).remove().draw();
t2.row.add( this ).draw();
} );

$('#t2 tbody').on( 'click', 'tr', function () {
t2.row( this ).remove().draw();
t1.row.add( this ).draw();
} );
} );
[/code]

And yes, DT 1.10 is backwards compatible (unless any private properties have been used, in which case it might break!). If you are using any of the extras, they might also need to be updated to their dev versions.

Allan

stanmancan

Thank you Allan, this works like a charm!

allan

Excellent :-)