Beginner's question about DataTables and date formatting

BCInNC

I've just been handed an MVC4 C# project completely without documentation. In all honesty I was not aware of the existence of DataTables before today and only found out about it by accident. I have a list cshtml in my code that is being populated by the code listed below:

My immediate problem is that while this appears to be working and returning all the necessary fields, the date field is displaying like this: /Date(1441339200000)/

According to my co-worker and various on-line references, this is a JSON problem.

So my question is, is this something I can quickly fix in the JavaScript code below, and if so, how?
(So far all my attempts to fix it in the cshtml have failed.)

Thanks.

 $(function ()
     {
         var oTable = $('#provider-activity-list').dataTable(
             {                
                 sAjaxSource: '@Url.Action("ActivityListAjax")',
                 fnServerParams: function (aoData) {.
                     aoData.push({ name: "MyId", value: "@Model.Id" });
                 },
                 fnServerData: function (sSource, aoData, fnCallback)
                 {
                     $.getJSON(sSource, aoData, function (json)
                     {
                         fnCallback(json)
                     }
                     );
                 },
                 aoColumns: [                    
                     {
                         mData: "ActivityDate", bSortable: true 
                     }, etc etc

ThomD

What version of datatables? That code sample is using legacy syntax (pre-1.10). Check this page for how to use the mRender function (deprecated, but consistent with your syntax) to change how the data is presented.

http://legacy.datatables.net/usage/columns

Get the js library called moment.js. This is a great library for date manipulation.

combining the two, you would get something like this:

"mRender": function ( data, type, full ) {
        return (moment(data).format("MMM Do, h:mm:ss a"));
      }

to get a date format like "Sep 4th, 3:31:08 pm"

BCInNC

Am I reading this correctly? Still can't get it to work. All I get now are a line of dots.

I should change my aoColumns entry to:

{
      mData: "ActivityDate", bSortable: true  ,
      "mRender": "[, ].name"
  }   

Then create a separate function which is called by the original aoColumns entry?

$(document).ready(function ()

{

            var oTable = $('#provider-activity-list').dataTable({
                "aoColumnDefs": [{
                    "aTargets": [0],
                    "mData": "ActivityDate",
                    "mRender": function (data, type, full) {
                        return (moment(data).format("MMM Do, h:mm:ss a"));
                    }
                }]
            });
        });  

ThomD

You don't need a separate entry for this column definition, it should replace the existing entry in the aoColumnDefs array.

I don't use that version, so I'm not 100% sure of the syntax, but that looks right. You can test that it is basically right by putting in this to confirm the syntax is right.

                 "mRender": function (data, type, full) {
                        return ("render me");
                    }

If that works, I'd double check that moment is returning a good value. You might need remove that /Date()/ text from around the value.

BCInNC

My apologies for wasting your time. I've found an alternate solution involving formatting the date field in C# using AutoMapper (which I also have to learn...). I simply have no time to pursue this particular method.
Thanks.