Sorting a DataTable using custom function does not work

Question

I am working with DataTables plug-in in JavaScript.

Usually, if I need to update a cell value, I use the cell().data(set) method followed by .draw().

However, I do not want to use this way because my table contains heavy DOM object. So, when I need to update a cell, I just call some jQuery like $("#cell").attr("myattr", 50) for example, and then I managed to never have to use draw(). This prevents the object to be rebuilt each time, but unfortunately it also means that the DataTable is not aware of these changes (cell().data() returns the unchanged object).

This is a problem when I want my table to be sorted. In fact, the sorting is performed on the data that the datatable known, data which is not changed.

So I thought I could use the columns.render option, implementing a function like this:

function(data, type, row, meta) {
    if (type === "sort") {
        return $("#cell").attr("myattr");
    }
    return data;
}

This does not work and I think this is because of the fact that DataTable caches the data. So, as I never update cells data, cache never need to be updated, and sorting is done using this cache, which does not correspond the cell myattr attribute.

I am looking for a workaround which can allow me to sort a DataTable even if cells values are not changed internally but from outside.

Play with this JSFiddle, clicking the "CHANGE VALUES" button and trying to sort the column, you can see that the values are not correctly ordered.

Delgan · Accepted Answer · 2015-09-23 20:56:38Z

3

There are couple solutions:

SOLUTION #1

Use cell().invalidate() API method to invalidate data in cache as shown below:

$('#example').DataTable().cell($("#a").closest('td')).invalidate('dom').draw(false);

DEMO

See this jsFiddle for code and demonstration.

SOLUTION #2

You can use columns.orderDataType to specify name of custom ordering plug-in, see Custom data source sorting. These plug-ins can access live DOM content. Please note that there are no plug-ins built into DataTables, they must be added separately.

You can use dom-text plug-in as a base and write your own function to access the data for sorting.

DEMO

See this jsFiddle for code and demonstration.

edited Sep 23, 2015 at 20:56

Delgan

20k11 gold badges101 silver badges162 bronze badges

answered Sep 23, 2015 at 19:37

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Delgan Over a year ago

Oh, I was not aware of these solutions. This is very useful, thank you very much!

Gyrocode.com Over a year ago

@Delgan, thanks for adding the second demo, glad that it worked for you.

Collectives™ on Stack Overflow

Sorting a DataTable using custom function does not work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related