Tables childrows works only once per two data updates

sausageisking

Hi there!
When table is drown first time everything works fine, then after i update data, childrows stop working, and after one more update childrows works again, and so on. So childrows works only one time per two updates.
There is my code, i use Electron js btw.

 var table = window.$('#table_id').DataTable({
                    data: data,
                    select: "single",
                    retrieve: true,
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": '',
                            "render": function () {
                                return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                            },
                            width: "15px"
                        },
                        {"data": "fn"},
                        {"data": "username"},
                        {"data": "timestamp"},
                        {"data": "filename"},
                        {"data": "agent"},
                        {"data": "job_type"},
                        {"data": "progress"},
                        {"data": "status"},
                        {"data": "priority"},
                    ],
                    "order": [[1, 'asc']]
                });


                myConsole.log("1")

                window.$('#table_id tbody').on('click', 'td.details-control', function () {
                    var tr = window.$(this).closest('tr');
                    var tdi = tr.find("i.fa");
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                        tdi.first().removeClass('fa-minus-square');
                        tdi.first().addClass('fa-plus-square');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                        tdi.first().removeClass('fa-plus-square');
                        tdi.first().addClass('fa-minus-square');
                    }
                });

                window.$('#table_id').on("user-select", function (e, dt, type, cell, originalEvent) {
                    if (window.$(cell.node()).hasClass("details-control")) {
                        e.preventDefault();
                    }
                });
                function format(d){

                    // `d` is the original data object for the row
                    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                        '<tr>' +
                        '<td>Path:</td>' +
                        '<td>' + d.path + '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>Message::</td>' +
                        '<td>' + d.message + '</td>' +
                        '</tr>' +
                        '</table>';
                }

                window.$('#table_id').DataTable().clear().draw();
                window.$('#table_id').DataTable().rows.add(data); // Add new data
                window.$('#table_id').DataTable().columns.adjust().draw(); // Redraw the DataTable


            }
        });

     }


});

colin

Hi @sausageisking ,

Nothing looks obviously wrong there - I can't see where you're doing the update so it's hard to know how that could affect your table. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin