DataTables allow sorting for dynamically loaded column

Question

So I've done a bunch of googling and nothing seems to work with my application.

I have a table that I create, after it is done being created I initialize datatables

expiredEmailsTable = $selector.dataTable( {
   "iDisplayLength": 100
} );

One of my columns (td's) is just a loading icon while my ajax call actually queries the database to get the value.

Once I get my ajax response back I change the html of the td from the loading icon to the actual value.

My problem is, when the datatables initializes the table that column is pointless (considering it's just a loading icon). What I want is once everything is loaded to be able to sort (the new value is a number). essentially after each ajax call I need a way to 'update' the datatables so it will be able to resort. I've tried the following with no luck:

$selector.trigger("update");                            
$selector.dataTable().fnDraw();
expiredEmailsTable.api().draw(false);   
$selector.dataTable().api().draw(true); 
$selector.DataTable().draw(true);

Does anyone have any suggestions? As far as I can tell I've tried every possible combination that I can find given their docs. I'm NOT adding a whole new row or anything, just changing the value of 1 specific column.

"Once I get my ajax response back I change the html of the td from the loading icon to the actual value." - how do you do that? It sounds you are not using dataTables AJAX but injects content to the table after an outside AJAX call? — davidkonrad
– davidkonrad, Commented Oct 26, 2015 at 23:10

Vadim · Accepted Answer · 2015-10-26 21:49:18Z

2

When Datatable is rendered from HTML table, it has to figure out datatypes on the fly to determine how to sort columns. I recommend you try applying column model to your table as follows (this is just an example):

$selector.dataTable({
        columns: [
            {title: 'String column1', 'type': 'string'},
            {title: 'String column2', 'type': 'string'},
            {title: 'String column3', 'type': 'string'},
            {title: 'Number column', 'type': 'number'}
            ]
    });

'type' is what tells datatables what to do when you need to sort.

answered Oct 26, 2015 at 21:49

Vadim

1794 bronze badges

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

3 Comments

Travis Over a year ago

So although that might be a 'best practice' or how I 'should' do it, I fail to see how this would help my current issue?

Vadim Over a year ago

Travis, do you know your columns ahead of time or is your table always dynamic and you are building HTML on the fly before applying DataTable to it? Basically, if you know your metadata, go ahead and tell DataTable what your data will look like (basically what I was trying to convey).

davidkonrad Over a year ago

It is somehow a good an obvious suggestion, but dataTables holds a lot of "cached" internals it is using so it can sort columns fast and according to datatype.

Collectives™ on Stack Overflow

DataTables allow sorting for dynamically loaded column

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related