Save dropdown state on ajax reload - ResponsivePlugin

Save dropdown state on ajax reload - ResponsivePlugin

GopinhoGopinho Posts: 2Questions: 1Answers: 0

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);

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

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

    Kevin

  • GopinhoGopinho Posts: 2Questions: 1Answers: 0

    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);
    
Sign In or Register to comment.