Travis
Travis

Reputation: 177

DataTables allow sorting for dynamically loaded column

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.

Upvotes: 2

Views: 2253

Answers (1)

Vadim
Vadim

Reputation: 179

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.

Upvotes: 2

Related Questions