Refreshing table after updating data

Refreshing table after updating data

arnorbldarnorbld Posts: 110Questions: 20Answers: 1

Hi guys,

I have a table with two date columns. I use the inline editor and users can change those dates.

The data (table) is then submitted to a web service that churns through the data and may recalculate some or all of the dates in the table. I then get the updated dates back. This is done via AJAX and I have the data back into my JavaScript.

My problem is that I now need to go through the data I got back and update the DataTables data with the updated dates. The array I get back has the row ID ("idSrc": "DT_RowId" in the editor configuration)

Here is the code I have. dataArray is the array that I get back from the web service with the updated dates and the row ID:

/*    LOOP THROUGH DATA    */
jQuery.each(dataArray, function (row, dateUpdates) {
    var rowID = '#' + dateUpdates.rowid;
    var dtrow = table.row('#' + dateUpdates.rowid).data();
    var dtRowIdx = table.row('#' + dateUpdates.rowid).index();
    console.log('row ID from table: ' + dtrow.DT_RowId + '  from array: ' + dateUpdates.rowid);
    dtrow.startdate = dateUpdates.startdate;
    dtrow.enddate   = dateUpdates.enddate;
    jQuery(rowID + " >td:eq(7)").text(dtrow.startdate);
    jQuery(rowID + " >td:eq(8)").text(dtrow.enddate);
});

table.draw(true);

The dtrow holds the correct data - the console.log shows the same row ID from both the row data. If I force the startdate to '01-01-2021' it does NOT show up in the cell in the table, but if I pop up the date picker it is set to 01-01-2021 so it looks like the data in DataTables has changed, but the cell remains. If I use the last two jQuery calls to set the data, it displays correctly in the table cell, but I realize that I only have the rows for the current page so that's not going to work on prior or subsequent pages.

I noticed that the dtRowIdx always returns the index of the LAST row in the whole table - in this case, there are 42 records in the data and the index shows 41. But the dtrow data has the correct row selected. So I'm a bit lost on what exactly I'm missing? Maybe a better approach would be to loop through all the datarows in the table and then find the row in the dataArray, but datArray may only have one record while the table could have many hundreds, so I figured it was better to loop through the less number of records.

Any help would be very much appreciated!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    edited February 2021

    You are updating the table using jQuery to directly update the HTML. Datatables doesn't know anything about these updates. See this FAQ.

    Try replacing these lines:

        jQuery(rowID + " >td:eq(7)").text(dtrow.startdate);
        jQuery(rowID + " >td:eq(8)").text(dtrow.enddate);
    

    With this:

    table.row( dtRowIdx ).data( dtrow ).draw( false );
    

    This should update the row data and table data using Datatables APIs. The data should appear and search and sort properly.

    Kevin

  • arnorbldarnorbld Posts: 110Questions: 20Answers: 1

    Hi Kevin,

    Yes, I knew updating the row via jQuery wasn't going to work, but it updated the cells. I've made the change suggested and it's working now :) Thank you so much!

  • arnorbldarnorbld Posts: 110Questions: 20Answers: 1

    Hi Kevin,

    This seems to be working except I'm having an issue with my array not having the last row ID in it - that's my problem ;)

    But I have a related question. If there are many rows to update, then the update:

    table.row( dtRowIdx ).data( dtrow ).draw( false );
    

    seems to call the rowcallback for each row in the table each time. In my last test, I had 116 rows so it redrew the entire table 116 times.

    This takes time and shouldn't be needed until the data update has finished. I use the callback for some data conditional styling etc.

    Is it possible to delay the redrawing until after the data has all been updated?

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    Answer ✓

    Remove the ‘draw()’ from the statement and call it after the loop. This way the table is drawn only once.

    Kevin

  • arnorbldarnorbld Posts: 110Questions: 20Answers: 1

    Hi Kevin,

    Sorry for the late reply! Thank you! I had "fixed" this by adding a flag so that the rowcallback didn't execute while the table was being reloaded and it worked, but this is much cleaner!

This discussion has been closed.