Javascript – Jquery Datatables column rendering and sorting

ajaxdatatablesjavascriptjqueryjquery-datatables

I'm working with a datatable that includes a column of mysql timestamps in the format YYYY-MM-DD HH:MM:SS. My table is set to initially sort by this column. Datatables correctly autodetects the timestamps format and sorts appropriately.

I'm now trying to alter the appearance of this column to be more user friendly, but not effect the way it gets sorted. So, I'm using the columns.render functionality like this:

{
        "data":"created_at",
        "name":"date",
        "visible":true,
        "title":"Date Created",
        "render": function(data, type, full, meta){
                var date = new Date(data);
                var options = {year: "numeric", month: "long", day: "numeric"};

                return date.toLocaleDateString('en-US', options);
        }
}

As soon as I do this, sorting no longer works correctly. I was under the impression that the render function should only effect the display of the data, but that it should still be sorted according to the underlying data on that row's data object. These are the docs I am trying to use (http://datatables.net/reference/option/columns.render).

Does anyone know how I can sort based on the actual timestamp but display a more user friendly date?

Best Solution

I think I got it. I just had to tell the render function to only operate on "display" types:

{
        "data":"created_at",
        "name":"date",
        "visible":true,
        "title":"Date Created",
        "render": function(data, type, full, meta){
                if(type == "display"){
                        var date = new Date(data);
                        var options = {year: "numeric", month: "long", day: "numeric"};

                        return date.toLocaleDateString('en-US', options);
                }

                return data;
        }
},