DataTables - Format returning ajax data

Question

I am working on this example from DataTables.net but I have made modification so that it works with my ajax call to my API.

My problem is that my API returns the DateTime values like this...

Created=2015-02-13T00:00:00

I need to be able to convert that to just be just the date without the time for my table (hopefully without changing the API). I have tried everything that I know to try. I am still sort of a beginner at this advanced javascript stuff. I was trying to do just a simple substring but I dont think that is working. Well at least how I was trying anyways.

Thanks for anything help!

DataTables v1.10.5

Jquery v1.11.2 (due to need to support IE8)

Original Problem Code:

$(document).ready(function () {
var table = $('#AllHuddleRecords').DataTable({
    "ajax": "../api/huddle/posts",
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data" : "EmpName" },
        { "data": "Created" },
        { "data" : "PriorityName" },
        { "data" : "TopicName" }
    ]
});

Thanks to the guidance of cmxl...here is the working code...

var table = $('#AllHuddleRecords').DataTable({
    "ajax": "../api/huddle/posts",
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data" : "EmpName" },
        { "data": "Created" },
        { "data" : "PriorityName" },
        { "data" : "TopicName" }
    ],
    "columnDefs": [
        {
            "render" : function (data, type, row) {
                return new Date(data).toLocaleString();
            },
            "targets": 2
        }
        ]
});

score 5 · Accepted Answer · edited May 23 '17 at 11:46

You can hook in to the column rendering event. See the documentation here: https://datatables.net/examples/advanced_init/column_render.html

    $(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return data.slice(0, data.indexOf('T'));
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]
    } );
} );

Or if you want to parse the string as a date you can refer to this answer here: Converting string to date in js

//...
"render": function ( data, type, row ) {
    return new Date(data).toString();
}
//...

Here you can look even deeper into the Date object in Javascript: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date

Nick Vasic · Answer 2 · 2015-02-19T22:27:36.243

Is it possible to do some pre-processing on your data before you send it to data tables, for example if you are inserting the following data into your data table, use Date.parse() on each element of your data to convert to the desired format?

var ajaxData = {
  "data": [{
    "EmpName": "Bob",
    "Created": "2015-02-13T00:00:00",
    "PriorityName": "Priority1",
    "TopicName": "Topic1"
  }]
};

$(ajaxData.data).each(function() {
  var dateMillis = new Date(this.Created);
  this.Created = dateMillis.getMonth() + "/" + dateMillis.getDay() + "/" + dateMillis.getFullYear();

});

Note that if you want to sort on your date column, then the solution may well be to pre-process data and convert dates to milliseconds using Date.parse() and then use render to convert the date to readable format as cmxl suggested. Good luck!

DataTables - Format returning ajax data

2 Answers2