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!

Sharpfreeze

robertc, tip: a simple search can take you far. – Sharpfreeze

tip: you're the one that wants his question answered, that's more likely to happen if you don't make people work to figure out what your problem is about – Teledu

I made my problem clear by giving people who know DataTables better than me (datatables.net) what they might need to answer my question. – Sharpfreeze

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;
        }
    }]
});

Verticillaster

Thank you very much! There's a lot of variations in answers to this question, but this is the only one that worked for me. Also, good you gave 2 alternative solutions. – Niggard