Editable nested datatables

MPeter1975

Hi,

I used the drill-down example to put a table inside the details. I made this table to be a datatable and used the editable plugin to be able to edit its data. My problem is that I cannot select rows for deletition (visually no rows can be selected) and if the delete button is enabled it does not do anything... The fnFormatDetails only writes the html table definition. My final goal would be to set up a detail datatable which loads its data through an ajax call. Any ideas?

My code sample:


[code]
$('#example td.control').live( 'click', function () {
var oTable = example;
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );

var iId = nTr.id;

if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();

var tInnerTable = $('#dtInnerTable').dataTable({

// Reinitialization
"bRetrieve": true,

// Look and feel
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bJQueryUI": true
}); // End of datatable

tInnerTable.makeEditable({
sDeleteURL: "/apps/modules/ajax_commands/cost_delete.php"


});

anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} );
[/code]

MPeter1975

Investigating the problem I realized, that the nested table's row did not get the row_selected class when the user clicked on it. Any idea why not?

MPeter1975

With further investigation I realized that the Editable plugin does something wrong. Without it I'm able to select rows (strange but able to select multiple rows by default) but when I put .makeEditable(); after the datatable the row selection is gone.

Hope someone can help me what to do with this.

igoh

@MPeter1975 Maybe it is 2 years late, but I have met the same issue. The problem is the table click handler only assume one table will be used (datatable.jeditable.js ). So in order to bypass the limitation a bit modification are needed for the detection of selecting row. Change the line of code in 1265 from
$("tbody", oTable).click(function (event) {
to
$('#' + oTable[0].id + ' tbody').on('click', 'tr', function (event) {
...