How DataTables determine columns type

Question

I have a dynamic table enhanced by jQuery DataTables, which display a custom object similar to this example.

JSON:

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": {
        "display": "SomeString",
        "timestamp": 1303686000
      },
      "office": "Edinburgh",
      "extn": "5421"
    },
    // ... skipped ...
]}

JavaScript:

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

The difference is that I dynamically build the columns configuration, because the columns can be in any order, and others columns can be added or removed from the list. For this example (my case is very similar) the problem is that for some reason the timestamp property is ordered as a String instead of being ordered as a number.

I discovered that after setting the column "type" as "number" the ordering works perfectly. I'm presuming that DataTables is auto detecting the column as "String" for some reason (maybe because the display element is a string).

How does DataTables set the type of the columns, when is not explicitly declared?

Edit 1

I made a sample code to show the problem http://jsfiddle.net/Teles/agrLjd2n/16/

Answer 1

DataTables always check the "type" property of the column "data" to auto detect the type of the column, if no "type" property is specified it will check the default value "_".

So if you want DataTables to auto detect the type of the column checking the type of your "sort" property you should set the "type" property of data to be equals to your "sort" value

Here is a sample code with different approchs to achieve what I was tryng to do. Thanks @Gyrocode.com and @davidkonrad.

var Cell = function(display, value) {
    this.display = display;
    this.value = value;
}

$(document).ready(function() {
    var cells = [
        new Cell("120 (10%)", 120),
        new Cell("60 (5%)", 60),
        new Cell("30 (2.5%)", 30)
    ];

    $('#example').DataTable( {
        data: cells,
        columns: [
            { 
                title : "Column NOT OK",
                data: {
                    _:    "display",
                    sort: "value"
                } 
            }, { 
                type : "num",
                title : "Column Ok setting column type",
                data: {
                    _:    "display",
                    sort: "value"
                } 
            }, { 
                title : "Column Ok changing default value",
                data: {
                    _:    "value",
                    display: "display",
                    filter: "display"
                } 
            }, { 
                title : "Column Ok setting data type",
                data: {
                    _:    "display",
                    sort: "value",
                    type: "value"
                }  
            }, { 
                type : "num",
                title : "Column Not OK",
                data: "display"
            }
        ]
    } );
} );

Answer 2

jQuery DataTables has built-in mechanism for type detection. There are multiple predefined functions for various types with fallback to string data type.

It's also possible to use third-party plug-ins or write your own.

There are multiple ways to specify data type, below are just the few.

SOLUTION 1

Use type option.

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

SOLUTION 2

Use returned JSON data for type detection, see columns.data for more information.

$(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",
                type: "start_date.timestamp",
            } },
            { data: "salary" }
        ]
    } );
} );