I'm not able to use Reponsive events

DarckCrystale

Hi!

I use DataTable with raw HTML. Currently, I am trying to catch the .on('responsive-display') event.

This is my method:

I instanciate the DataTable in a file:

 $('#DataTables_Table_0').DataTable({
    responsive: {
        details: {
            type: 'column',
            target: 'tr'
        }
    }
});

In another file, I try to log when a row opens itself to reveal more content:

    $('#DataTables_Table_0').dataTable().api().on('responsive-display', function (e, datatable, row, showHide, update) {
        console.log('Details for row ' + row.index() + ' ' + (showHide ? 'shown' : 'hidden'));
    });

But when I click on a row to open it, it does not log anything.

I think I'm using wrongly this plugin. Could you please help me?

colin

I just tried it here and those log messages are being displayed as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

DarckCrystale

Thanks! I saw that you used a preset id, I did not add it in the first place. So now my code looks like this:

$('[data-toggle="datatable"]').each(function (index) {
    let $table = $(this);
    
    // Instanciate the DataTable
    $table.DataTable({
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        }
    });
});

$('#example').dataTable().api().on('responsive-display', function (e, datatable, row, showHide, update) {
    console.log('Details for row ' + row.index() + ' ' + (showHide ? 'shown' : 'hidden'));
});

It did not solved my problem but I have a different issue now: an error message is alerted: DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 and the table is not "DataTablelized".

colin

That will be because you're initialising the table again. Could you update my test case to demonstrate that, please.

DarckCrystale

Hi!
I edited your bin to setup the things like I do in my code, but I do not understand why, it's not throwing any error and works as expected in the bin...
Could you please check it anyway? http://live.datatables.net/fuhetime/7/

Thanks for your patience

colin

As you say, it all looks fine. One thing to check is whether the event handler for responsive-display is called before the table is initialised - if so, the event handler would initialise the table first, and the second would throw the error. A way to tell is to see if the ColReorder is working on the table.

Colin

DarckCrystale

Yes that's the problem, thank you so much!