Rows close when Ajax updates

agentas22

Hello,

I am having some trouble with Datatables. I have connected a datatable to a Mysql database via Ajax. It is set to update every second. The problem is, when Ajax upadates the table is redrawn and the rows which were open then close. Since this happens really quick it looks like the system is glitching. Is there a way around this?

Thank you!

kthorngren

There are multiple ways to refresh the Datatables table. Please provide your code so we can see how you are doing this.

rows which were open then close

Does this mean they are removed from the table or just from the display and remain in the table.

Kevin

agentas22

Thank you for your respone!

I attached a screenshot of what I mean about the rows closing.

Here`s the way I am refreshing the table via Ajax. The "server_processing.php" file is the same that Datatables provide in their example(https://datatables.net/examples/server_side/simple.html).

        var table = $('#vilkikai').DataTable( {
            responsive: true,
            ajax: "server_processing.php",
            language: {
                "lengthMenu": "Rodyti _MENU_ vilkikų per puslapį",
                "emptyTable": "Nėra duomenų",
                "zeroRecords": "Nieko nerasta",
                "loadingRecords": "Kraunama...",
                "processing": "Apdorojama...",
                "search": "Ieškoti:",
                "paginate": {
                    "next": "Kitas",
                    "previous": "Atgal"
                },
                "info": "",
                "infoEmpty": "",
                "infoFiltered": ""
            }
        } );
         
        setInterval( function() {
            table.ajax.reload();
        }, 1000);

Thank you very much!

kthorngren

I see the child row(s) are closed. I'm not sure if this will affect child row display but you could try the reloading using the options in the second example here:
https://datatables.net/reference/api/ajax.reload()#Examples

Setting the second parameter false keeps the current paging position. Might keep the child row open.

Another option is to just get new data from the table then use rows.add(newData).draw(false); where newData is a variable containing the updated data.

Kevin

agentas22

Yeah, I have tried both of those methods. First one definitely doesn`t help in this situation. The second one just adds new rows every Ajax update, however the child rows do retain their positions.

Would you have any other ideas?

kthorngren

Your preference is to use ajax.reload() instead of rows.add().draw(false) even though adding the new rows keeps the child row open?

@allan will need to follow up with ajax.reload() and if its expected that the child rows stay open.

Kevin

allan

No they won't automatically since they are in theory new rows inside the DataTable (i.e. you've deleted the old ones, and then added new ones, so there is nothing to inherit).

You'd need to have some external code that would register what rows have child rows displayed (preXhr) and then display them again on the next draw.

This is how Responsive does exactly that.

Allan

agentas22

Thank you guys! It is working now.