Failing to catch events on responsive DataTable.

philglau

I've set up a responsive datatable and it seems to respond correctly to my column priorities. However, I'm also trying to capture events like re-draw but am not having luck. I've tried the method using jQuery as the selector as well as the direct 'on()' functionality to the dataTable object. No luck.

Here's the my fiddle

And the basic code I'm trying. None of the events seem to trigger as I don't ever see the alerts or console.logs

jQuery(document).ready(function ($) {

    // this works and logs the correct information.
    $(document).on( 'init.dt', function ( e, settings ) {
        var api = new $.fn.dataTable.Api( settings );
     
        console.log( 'New DataTable created:', api.table().node() );
    } );

    // this should appear before the 'init.dt' fires in the console (and it does.)
    console.log('initializing a datatable');

    var log_table = $('#files').dataTable({
        'responsive': true,
        'autoWidth': false,
        'paging': false,
        'searching':false,
        'ordering':false,
        'columns': [
            {responsivePriority: 1},
            {responsivePriority: 7},
            {responsivePriority: 5},
            {responsivePriority: 3},
            {responsivePriority: 4},
            {responsivePriority: 2},
            {responsivePriority: 6},    
        ]
    });
    
    console.log('setting up on event'); // also shows up in console.
    
    // this appears to display the correct data structure for log_table
    console.log(log_table);
    
    // none of these below seem to get fired or show up in the console log
    $('#files').on('column-visibility.dt', function ( e, settings, column, state ) {
        console.log(
            'Column '+ column +' has changed to '+ (state ? 'visible' : 'hidden')
        );
    });
    
    
    $('#files').on('draw.dt',function() {
        alert('resized');
    });
    
    log_table.on('draw',function() {
        alert('resized');
    });
    
    log_table.on('responsive-resize', function ( e, datatable, columns ) {
        var count = columns.reduce( function (a,b) {
            return b === false ? a+1 : a;
        }, 0 );
     
        console.log( count +' column(s) are hidden' );
    });
    
    log_table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
        console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
    });
});

I feel like I must be doing something simple wrong, but can't figure out where I went wrong. Any help would be appreciated. Thank you.

philglau

Seems like the problem was my selector was not using the namespaced events. The following now works for me.

    // this one now works with the '.dt' appended to the end.
    $('#files').on('responsive-resize.dt', function ( e, datatable, columns ) {
        var count = columns.reduce( function (a,b) {
            return b === false ? a+1 : a;
        }, 0 );
     
        console.log( count +' column(s) are hidden' );
    });
    // this now works as well with the '.dt' appended
    log_table.on( 'responsive-display.dt', function ( e, datatable, row, showHide, update ) {
        console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
    });