Moving rows between datatables. Can't create jQuery generated row added by fnAddTr
Moving rows between datatables. Can't create jQuery generated row added by fnAddTr
I am moving rows back and forth between two tables, that are initialized below.
[code]
// make both tables sortable and add/remove rows as necessary
availTable.dataTable({
"sDom": 'rlip<"visualClear">t<"visualClear">',
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"aoColumnDefs": [
{"bSortable": true, "aTargets": [1]},
{"bSortable": false, "aTargets": ["_all"]},
{"sWidth": "8em", "aTargets": [3,4]}
],
"bAutoWidth": false
});
actTable.dataTable({
"sDom": 't'
});
[/code]
actTable starts out empty, and is populated by filling it with rows initially residing in availTable. I move rows in this direction with the following code (the first column of each table contains checkbox inputs to indicate which rows should be transferred).
[code]
// move selected activities from available (availTable) to in session (actTable)
$('#add-activities-to-session').click(function(event){
event.preventDefault();
availTable.$('input:checked').each(function(){
var row = $(this).closest('tr');
var pos = availTable.fnGetPosition(row[0]);
availTable.fnDeleteRow(pos);
row.removeClass();
actTable.fnAddTr(row[0], false);
});
actTable.fnSort( [[1,'asc'] ] );
});
[/code]
Similarly, to transfer rows back, I use similar code, though in this case rows are transferred one at a time, and the trigger is a button in each row.
[code]
// Remove activity from session
$('table').delegate('.removeActivityFromSession', 'click', function(event){
event.preventDefault();
var row = $(this).closest('tr');
var pos = actTable.fnGetPosition(row[0]);
actTable.fnDeleteRow(pos);
row.removeClass();
row.find('input:checked').attr('checked','');
availTable.fnAddTr(row[0]);
availTable.fnSort( [[1,'asc'] ] );
});
[/code]
All of this has been working fine, with no complaints. However, I've reached the point where I want to add new rows from data received via AJAX request. Here is the code for that.
[code]
$.post('get-newest-activity', function(actData){
var row = rowFromAct(actData);
actTable.fnAddTr(row[0]);
actTable.fnSort([[1, 'asc']]);
},'json');
[/code]
and rowFromAct is, for the moment, just a very simple function returning a basic tr element with placeholder values.
[code]
function rowFromAct(activity) {
var r = '12345';
r = r + '';
return $(r);
}
[/code]
The $.post and callback method work fine to add this row to the table, but when I click the input to remove a row that has been added this way I get the following error:
Uncaught TypeError: Cannot read property 'nTr' of undefined
which occurs around line 4488 of jquery.datatables.js
[code]
oData = oSettings.aoData[iRow];
if ( oData.nTr !== null )
[/code]
It looks to me like the new row is being added, but something must not be going quite right when I call fnAddTr inside the $.post callback. Any ideas?
Thanks,
Brayton
[code]
// make both tables sortable and add/remove rows as necessary
availTable.dataTable({
"sDom": 'rlip<"visualClear">t<"visualClear">',
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"aoColumnDefs": [
{"bSortable": true, "aTargets": [1]},
{"bSortable": false, "aTargets": ["_all"]},
{"sWidth": "8em", "aTargets": [3,4]}
],
"bAutoWidth": false
});
actTable.dataTable({
"sDom": 't'
});
[/code]
actTable starts out empty, and is populated by filling it with rows initially residing in availTable. I move rows in this direction with the following code (the first column of each table contains checkbox inputs to indicate which rows should be transferred).
[code]
// move selected activities from available (availTable) to in session (actTable)
$('#add-activities-to-session').click(function(event){
event.preventDefault();
availTable.$('input:checked').each(function(){
var row = $(this).closest('tr');
var pos = availTable.fnGetPosition(row[0]);
availTable.fnDeleteRow(pos);
row.removeClass();
actTable.fnAddTr(row[0], false);
});
actTable.fnSort( [[1,'asc'] ] );
});
[/code]
Similarly, to transfer rows back, I use similar code, though in this case rows are transferred one at a time, and the trigger is a button in each row.
[code]
// Remove activity from session
$('table').delegate('.removeActivityFromSession', 'click', function(event){
event.preventDefault();
var row = $(this).closest('tr');
var pos = actTable.fnGetPosition(row[0]);
actTable.fnDeleteRow(pos);
row.removeClass();
row.find('input:checked').attr('checked','');
availTable.fnAddTr(row[0]);
availTable.fnSort( [[1,'asc'] ] );
});
[/code]
All of this has been working fine, with no complaints. However, I've reached the point where I want to add new rows from data received via AJAX request. Here is the code for that.
[code]
$.post('get-newest-activity', function(actData){
var row = rowFromAct(actData);
actTable.fnAddTr(row[0]);
actTable.fnSort([[1, 'asc']]);
},'json');
[/code]
and rowFromAct is, for the moment, just a very simple function returning a basic tr element with placeholder values.
[code]
function rowFromAct(activity) {
var r = '12345';
r = r + '';
return $(r);
}
[/code]
The $.post and callback method work fine to add this row to the table, but when I click the input to remove a row that has been added this way I get the following error:
Uncaught TypeError: Cannot read property 'nTr' of undefined
which occurs around line 4488 of jquery.datatables.js
[code]
oData = oSettings.aoData[iRow];
if ( oData.nTr !== null )
[/code]
It looks to me like the new row is being added, but something must not be going quite right when I call fnAddTr inside the $.post callback. Any ideas?
Thanks,
Brayton
This discussion has been closed.
Replies
DataTables 1.9 uses a new method for very quickly looking up rows in the table from a TR element, and I think the problem you are hitting here is that the fnAddTr plug-in was out of date relative to this change. I've just updated the plug-in and hopefully that will address the issue for you.
Allan
After I posted this, I realized I was also having some weird indexing issues, where if I added rows from more than one page of the pre-populated table (which only shows 5 entries at a time) using fnAddTr, and then deleted them, fnDeleteRow(pos) would delete rows from actTable (their current table) based on the position of that row before it had been deleted from availTable (the original table) relative to pagination.
So, for example, if I added the first row off of each page of availTable, and then went and deleted one of them from actTable, they would all be removed. But only one would reappear in availTable.
So, last night, after I posted I went back and reworked my code to use fnAddData instead of fnAddTr. And that took care of all my issues. So I will probably stick with that for the time being, but next time I'm moving things back and forth I will take a look at the updated fnAddTr plugin.
Otherwise this has been a fantastic product for me. Thank you!