How do I make sure my responsive.details.display function does not return undefined?

spievat

Greetings!

I'm having trouble catching the responsive-display event.

I know from the docs about the event that my problem is likely the showHide parameter:

Flag to indicate if the details are being shown (true) or hidden (false). This value is determined by the function used for responsive.details.display.

Looking into the return value for responsive.details.display I read this:

true if the display function has shown the hidden data, false if not. This information is used to trigger the events indicating if Responsive has shown or hidden information. If undefined is returned, no event will be triggered.

I can catch the responsive-display event no problem when simply initializing my responsive parameter like so:

datatable = $('#data_table').DataTable( {
    ...
    responsive: true,
    ...
)};

However, when I add in functions to display all the data in a modal (with a custom header) then I can no longer catch the event.

If undefined is returned, no event will be triggered.

How do I make sure my responsive.details.display function does not return undefined?

My code to display the child row details in a modal (per this doc page), and using a default renderer to show all of the data (per this doc page).

datatable = $('#data_table').DataTable( {
    ...
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal({
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for customer ' + data.customer;
                }
            }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll(),
    
        }
    },
    ...
)};

My code to catch the 'display details' event, taken from this doc page.

// hook into the event to display/hide the row details modal
datatable.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
    console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
} );

Debug Result
https://debug.datatables.net/asonay

Thank you in advance!

alaniso

hello spievat,

I had the same issue and found a solution within responsive.bootstrap.js - include.

I added a "return true;" in original-line 79 (line 24 in this code extract) to set a valid boolean return. This forces responsive to frigger the 'responsive-display' - event:

_display.modal = function ( options ) {
    return function ( row, update, render ) {
        if ( ! $.fn.modal ) {
            _original( row, update, render );
        }
        else {
            if ( ! update ) {
                if ( options && options.header ) {
                    var header = _modal.find('div.modal-header');
                    var button = header.find('button').detach();

                    header
                        .empty()
                        .append( '<h4 class="modal-title">'+options.header( row )+'</h4>' )
                        .prepend( button );
                }

                _modal.find( 'div.modal-body' )
                    .empty()
                    .append( render() );

                _modal
                    .appendTo( 'body' )
                    .modal();
            return true;
            }
        }
    };
};

Probably this helps :-)
BR,
André