I'm not able to use Reponsive events

I'm not able to use Reponsive events

DarckCrystaleDarckCrystale Posts: 7Questions: 2Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • DarckCrystaleDarckCrystale Posts: 7Questions: 2Answers: 0

    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".

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • DarckCrystaleDarckCrystale Posts: 7Questions: 2Answers: 0
    edited December 2019

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • DarckCrystaleDarckCrystale Posts: 7Questions: 2Answers: 0

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

This discussion has been closed.