Refreshing sort cache in Jquery Datatable

Question

I can see that Jquery datatables generates a sorting cache when the table is first initialized using the table.columns().cache() method. One of my columns contains td elements that have a span with classes on it. Example:

<tr>...<td><span class="SpanColors red"></span></td>...</tr>
...
<tr>...<td><span class="SpanColors blue"></span></td>...</tr>

My sorting of this particular column depends on the class that is on the span. I have written a text-based column sorting function to do this, as described here.

In my table, I am dynamically updating rows in this way:

var id = //some guid
var newClassToAdd = 'yellow';
var rows = table.rows().nodes();
for (var i = 0; i < rows.length; i++) {
    var row = $(rows[i]);
    var span = row.find('td span.SpanColors')
    if (span && span.data('id') == id) {
        span.removeClass('red blue yellow');
        span.addClass(newClassToAdd);
    }
}

The issue that I am running into is that when I do this, the cache isn't updated so when sorting, the rows appear in the same order as prior to when I updated them.

Is there some method that can be used to update this cache after rows are updated? I have searched the internet, but apparently this isn't a problem that many people are having. Perhaps if I were updating my rows in a different (more legitimate) way, the cache, might refresh on its own?

Answer 1

You can probably use row().invalidate() after you're done modifying cell content.

table.row(rows[i]).invalidate('dom');

After all rows are invalidated you may need to call draw() to redraw the table.