Save dropdown state on ajax reload - ResponsivePlugin

Gopinho

Description of problem: When I want to view a table thats using ajax and the responsive plugin and the table has many columns and I press the dropdown and the table reloads the dropdown closes and i m using 1 sec interval, so i cant see anything that is on the dropdown!

My code here:

var users = new DataTable('#users', {
    ajax: '/api/users.php',
    columns: [
        { data: 'id' },
        { data: 'username' },
        { data: 'email' },
        { data: 'registration_date' },
        { data: 'permissions' },
        { data: 'role' },
        { data: 'credits' },
        { data: 'lastLogin' },
        { data: 'options' },
    ],
    responsive: true
});

setInterval(function () {
    users.ajax.reload(null, false);
}, 1000);

colin

It's reloading without a problem here - I'm not clear what your dropdown is or how it's being set. 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.

Colin

kthorngren

I think what @Gopinho means by dropdown is an open child row. Setting the rowId to the row's ID will allow Responsive to reopen the child rows on ajax.reload(). I updated Colin's example:
https://live.datatables.net/ruhuguwu/306/edit

However there is a race condition that occurs if opening or closing the Responsive child when the setInterval fires. Upping the timer helps somewhat.

I tried creating a click event to fire before the responsive-display event to try using clearInterval() to turn off the setInterval then restart it. Bu t I was not able to find a way to have my click event fire first. Maybe @allan will have some ideas.

Kevin

kthorngren

Another option might be to use the childRowImmediate display type as shown in this example.

Kevin

Gopinho

Thank you both for helping, i Just needed to do like the example that kthorngren said.

I just needed to add the atribute rowId: 'id' so I m going to leave the correct code.

var users = new DataTable('#users', {
    ajax: '/api/users.php',
    columns: [
        { data: 'id' },
        { data: 'username' },
        { data: 'email' },
        { data: 'registration_date' },
        { data: 'permissions' },
        { data: 'role' },
        { data: 'credits' },
        { data: 'lastLogin' },
        { data: 'options' },
    ],
    responsive: true,
    rowId: 'id' // Add This Line
});

setInterval(function () {
    users.ajax.reload(null, false);
}, 1000);