Maintaining sort order and current page after dynamically updating column

longpa

We have a table that is mostly static content except one column that is populated in repsnse to a async web call. This is the code to udate the datatable

signal.initialiseSignalCounts();

response.forEach((element) => {
    // Get signal colum data from DatatablesJS
    const signalColumn = 8;

    let cell = table.cell('#row-' + element.patientId, signalColumn);

    let signalStateCssClass = signal.getSignalCssClassFromState(element.state);

    signal.incrementSignalCount(element.state);

    const signalMarkup = `
                 <a class="btn ${signalStateCssClass} signal" href="/browse/${element.patientId}/signal">
                    ${element.clinicianFriendlyStateName} (${DateTime.fromISO(element.stateStartDate).toLocal().toRelative()})
                 </a>
                `;

    // Update the DatatablesJS data with the new Signal State button
    cell.data(cell.data() + signalMarkup);

    let row = table.row('#row-' + element.patientId);

    // Update DatatablesJS row with sorting info for Signal column
    row.data()[signalColumn]['@data-sort'] = signal.getSignalSortValueFromSignal(element);

    signal.updateCountPanelSignalCounts();
});

The trouble is that if the column the user is sorting is the one that we dynamically populate the sort is not reapplied. To fix this I am now reading the table.page() before update then resetting that and calling draw

  // Reset page
  table.page(currentPageBeforeUpdatingSignal);
  table.draw(false)

Does that all sound like the right thing to do?

allan

Yes, that would be the correct way to do it. A call to draw() will trigger a resort.

Allan

longpa

Thanks