TableTools can't select newly added row until browser refresh

mruivo

Hi there! Let's see if I can explain this all accurately...

I have a TableTools button that adds data. Once the data is added, it fnDestroy()'s the table, and then re-initializes the table with new data from the database. Once this happens, that new row we added is now at the bottom of the table, except that it can't be selected by TableTools. If trying to select it, I get this error: "Uncaught TypeError: Cannot read property '_DTTT_selected' of undefined ".

Any ideas? I believe my debug code is edohir.

As always, thank you for the amazing product that is DataTables and it's various plug-ins and extras.

Thanks!
-Matthew

allan

Firstly I'd suggest updating to the current nightly of TableTools if you haven't already. It is possible that will fix the issue, but I suspect probably not... The issue is that all the row references are being removed from the table, so the selected rows no longer exist. TableTools is handing on to them though, and thus throws an error when it tries to access them.

So what you need to do is call fnSelectNone just before you destroy the table (perhaps TableTools should do this itself), but you would need to have some way to select the replacement rows (fnGetSelected, fnSelectNone and then fnSelect I think).

Allan

mruivo

Hello!

I don't have any selected rows in my table when I get this problem, but I believe the principle you mentioned still applies. When I add a new row and restart datatables, perhaps tabletools is still holding on to the old data, thus the new row wouldn't be selectable as it "doesn't exist".

As a fix to this, instead of restarting datatables, I'll just fetch the one new row added, and use an API call to insert it, which I assume will update tabletools data as well. It'll run faster that way anyways :)

-Matthew

ljantzen

I am having this problem as well, although in a different scenario, and doing a fnSelectNone() made no difference.

I am using DT/TT to display a table of search results. Table is populated using ajax, and works fine on the first search. Subsequent search results appear fine, but when selecting a row, I get the "Uncaught TypeError: Cannot read property '_DTTT_selected' of undefined " error on the second line of fnIsSelected. This is because this.s.dt.aoData is an array with length zero.

When initializing the datatable I am resetting the table using the following code:

[code]
function resetTableData() {
var oTable = $('#tableSearchResults').dataTable();
var ott = TableTools.fnGetInstance('tableSearchResults');
if ( typeof ott != 'undefinded' && ott != null) ott.fnSelectNone();
oTable.fnClearTable();
oTable.fnDestroy();
}
[/code]

The table is populated using a variant of this code

[code]

success: function (returnData) {

resetTableData();

$('#tableSearchResults').dataTable({
"bJQueryUI": true,
"bProcessing" : true,
"aaData": searchResultData,
"aoColumns" : [
{"mData": "Comment", "sClass" : "srComment"},
.... other column definitions...
{"mData": "OldTag", "sClass" : "srOldTag"}
],
"fnCreatedRow": function( tr, aData, rownum) {
tr.id = 'sr' + aData.Id;
tr.className = "jstree-draggable";
},
"sDom" : 'TRlfrtip',
"bFilter": false,
"bPaginate": false,
"oColReorder": { "iFixedColumns": 1 },
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [ "select_all", "select_none" ]
}
});
[/code]

Please refer to http://debug.datatables.net/ececaj for more details.

Could anyone please help?