Responsive: Child row not updated with row

morpheus65535

I have this code updating a single row when receiving an event from server:

var rowId = $('#episodes').DataTable().row('#row_' + event_json.episode);
if (rowId.length) {
    $.ajax({
        url: "{{ url_for('api.episodes') }}?seriesid=" + event_json.series + "&episodeid=" + event_json.episode,
        success: function (data) {
            if (data.data.length) {
                $('#episodes').DataTable().row(rowId).data(data.data[0]);
            }
        }
    })
}

It works perfectly well when responsiveness isn't required but as soon as a child row is created in responsive mode, this child row isn't updated at the same time as the row.

Is there something I can do to get it updated at the same time?

Thanks!

colin

You could try issuing a draw() and see if that helps. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

morpheus65535

Hi Colin, thanks for your answer. Of course I can redraw the table (or the only the current page) but the side effect is that it hide the child row. As I could be updating table a lot I don't want the user to have his child row hidden all the time.

I have tried to .show() the child row after .draw() but did not success yet.

To be honest, I was expecting the child row to be updated at the same time as the parent row... :-/

kthorngren

To be honest, I was expecting the child row to be updated at the same time as the parent row

The Responsive child row isn't really a Datatatable's row. When using row().data() to update the row it will update the display of Datatables rows.

I have tried to .show() the child row after .draw() but did not success yet.

I could be wrong but I don't believe there is a show() API to use with Responsive.

Using draw() in this example seems to work here:
http://live.datatables.net/fubopizu/1/edit

Go to Page to and open the Garrett Winters row. Click the update button. The row data is updated, the child data is updated and the child row stays open. Note the use of draw(false) to stay on the same page.

Something else must be happening on your page to close the row. Or maybe its moving to a different page due to sorting.

Kevin

morpheus65535

Thanks @kthorngren, I finally found out I was receiving two event'S back to back that was trying to update the same row to close from each other. I've fixed that and now it works perfectly fine with .draw('page').