Datatables 1.10 - HTML5 "data-order" attr in TD takes no effect

Question

I'm having trouble ordering a column which has HTML in it. It is stated in the documentation for 1.10 that this should be taken care of by default, but It doesn't. Then I looked into the new features of 1.10 and saw that if there was a "data-order" attribute for each TD element in the same column, ordering could be done by said attributes. Perfect! Problem is, I can't get it to work.

Strange thing is that the example they have of this when the page is static is working as intended, but not when the data and the table is loaded dynamically.

I'm initiating the table with the following options and alterations to add the attributes. The invalidation is done to tell Datatables that it needs to redraw it (I saw it was needed somewhere):

"createdRow": function ( row, data, index ) {
                if ( data[6] ) {
                    cell = $('td', row).eq(6);
                    value = cell.text();
                    if(value == "Ej fakturerad") {
                        cell.attr('data-order', 1);
                    }
                    else if(value == "Nej") {
                        cell.attr('data-order', 2);
                    }
                    else if(value == "Kredit") {
                        cell.attr('data-order', 3);
                    }
                    else if(value == "Ja") {
                        cell.attr('data-order', 4);
                    }
                }
                oTable
                    .row( index )
                    .invalidate()
                    .draw();
            },

I'm implementing this DataTable with a composer package from Chumper/datatables in a Laravel project, which means the data source is Ajax, and uses server side processing.

Thanks in advance!

Answer 1

CAUSE

By looking at DataTables source code it seems that HTML5 data- attributes are read during table initialization only and only for static data.

SOLUTION

Solution #1

For server-side processing you may look into sending a value to sort along with a value to display in a cell for specific cells only. See Orthogonal data example for more information.

Basically, for row data structured as below:

{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303682400"
    },
    "office": "Edinburgh",
    "extn": "5421"
}

DataTables initialization code should be:

$(document).ready(function() {
    $('#example').dataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: {
                _:    "start_date.display",
                sort: "start_date.timestamp"
            } },
            { data: "salary" }
        ]
    } );
} );

In this case start_data.display would be shown in the table but start_data.timestamp would be used for sorting.

Solution #2

Alternatively, you can use columns.render property to define a function to determine a value to sort dynamically, for example:

$('#example').dataTable({
    "columnDefs": [{
        "targets": 6,
        "data": "field_name",
        "render": function (data, type, full, meta) {
            if(type === 'sort'){
               if(data === "Ej fakturerad") {
                   data = 1;
               } else if(data === "Nej") {
                   data = 2;
               } else if(data === "Kredit") {
                   data = 3;
               } else if(data === "Ja") {
                   data = 4;
               }
            }

            return data;
        }
    }]
});