How to add an event-handler (show/hide child) to certain rows and not to all?

mariokitz

In all child examples a plus/minus icon and event handler is added to each row of a datatable. I only have certain rows that will contain a child row and only these rows with a child should have the plus/minus icon and the onclick event handler to show/hide the child. Probably very easy but I am new to this topic. Thanks for your help!

allan

I would suggest using createdRow to conditionally add a class to the row based on whatever condition it is that you need. The event handler and also the icon should then reflect that class.

Allan

mariokitz

Thanks a lot allan, but the createdRow function does not fire once a child is added. It seems to be firing only if a "normal" row is created. If it does fire, how do I determine if a row has a child and how do I add the class "details-control" to the first column of that row (the first td in that row)?

mariokitz

Hi Allan, the createdRow idea let me in the right direction. This is working for me now:

$(document).ready(function() {

var table = $('#tbOPL').DataTable({
processing: true,
ordering: true,
paging: false,
"aaData": d.results,
"aoColumns": [
{ "orderable": false, "mData": null, "defaultContent": ''},
{ "mData": "ID", "defaultContent": ''},
{ "mData": "Eintragstyp", "defaultContent": '' },
{ "mData": "Kategorie_x0020__x0028_zur_x0020", "defaultContent": '' },
{ "mData": "Title", "defaultContent": '' },
{ "mData": "Ausl_x00f6_sendes_x0020_Ereignis", "defaultContent": '' },
{ "mData": "Aktueller_x0020_Status", "defaultContent": '' },
{ "mData": "Letztes_x0020_Ergebnis_x002f_For", "defaultContent": '' },
{ "mData": "Aktueller_x0020_Beginn", "defaultContent": '' },
{ "mData": "Aktuelle_x0020_Frist", "defaultContent": '' },
{ "mData": "Verantwortlich", "defaultContent": '' },
{ "mData": "Ansprechpartner.LastName", "defaultContent": '' },
{ "mData": "Priorit_x00e4_t_x0020_der_x0020_", "defaultContent": '' },
{ "mData": "Friststatus", "defaultContent": '' },
{ "mData": "Eintrag_erfolgt_durch.LastName", "defaultContent": 'IB-Manager (ITZBund)'},
{ "mData": "Modified", "defaultContent": ''  },
{ "mData": "UnterpunktvonId", "defaultContent": '' }
],
"createdRow": function( row, data, dataIndex ) {
    debugger;
    for(var i=0; i < d.results.length; ++i) {
        if(data.ID == d.results[i].UnterpunktvonId){
            
            $(row).children('td:first').addClass( 'details-control' );
            var td = $('td', row).eq(0);
            var tr = td.closest('tr'); 
            var nRow = this.api().row( tr );
            nRow.child(format ( d.results[i] ));
        }
     
    
    }
}
});

$('#tbOPL tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
 
    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child.show();
        tr.addClass('shown');
    }
} );


});

}

allan

That looks good to me. Thanks for posting back.

Allan