DataTables

Question

, jQuery DataTables, , 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" }
        ]
    } );
} );

, , , . ( ) , - timestamp , .

, "type" "number" . , DataTables - "String" (, , ).

DataTables , ?

1

, http://jsfiddle.net/Teles/agrLjd2n/16/

Answer 1

jQuery DataTables . string .

.

, .

1

type.

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

2

JSON , . columns.data .

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

Answer 2

"type" "" , "type" , "_".

, , DataTables , "", "type" ""

code , . @Gyrocode.com @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"
            }
        ]
    } );
} );