jQuery Datatable is not displaying Date data in the datable column

Question

I am trying to display Dates on to the jQuery Datatables but I get the following error "Requested unknown parameter 'DateTimes' from the data source for row 0 and then it displays all other columns with data but leaves the DateTimes column empty.

Here's my View code the for jQuery Datatable:

<script>
$(document).ready(function () {

    $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "TopPlayedInVenueList2",
        "bProcessing": true,
        "aoColumns": [ 
    { "mData": "TrackID" },
    { "mData": "DateTimes", "sType": 'date' },
    { "mData": "TrackName" },
    { "mData": "ArtistName" },
    { "mData": "Times" }
        ]
    });
});
</script>

<table id="myDataTable" class="display">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Track Name</th>
                        <th>Artist Name</th>
                        <th>Times</th>
                    </tr>
                </thead>
                <tbody> 
                </tbody>
  </table>

Here's my server-side Controller code for converting the Date:

var listOrder = daa.Where(i => i.Date >= Convert.ToDateTime(StartDate) && i.Date <= Convert.ToDateTime(EndDate)).ToList();

Edit: TopPlayedInVenueList2 Action Method Controller Code:

public ActionResult TopPlayedInVenueList2(jQueryDataTableParamModel param, string StartDate = "", string EndDate = "")
    {
        try
        {

            if (Request.IsAuthenticated == true)
            {
                string Path = @"C:\\5Newwithdate-1k.xls";
                OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source= '" + Path + "';Extended Properties=" + (char)34 + "Excel 8.0;IMEX=1;" + (char)34 + "");
                OleDbDataAdapter da = new OleDbDataAdapter("select * from [Sheet1$]", con);
                con.Close();
                System.Data.DataTable data = new System.Data.DataTable();
                da.Fill(data);

                List<TopPlayed> daa = new List<TopPlayed>();

                foreach (DataRow p in data.Rows)
                {
                    TopPlayed top = new TopPlayed()
                    {
                        TrackID = Convert.ToInt32(p.Field<double>("TrackID")),
                        Date = p.Field<DateTime>("DateTimes"),
                        TrackName = p.Field<string>("TrackName"),
                        ArtistName = p.Field<string>("ArtistName"),
                        Times = Convert.ToInt32(p.Field<double>("Times"))
                    };

                    daa.Add(top);

                }

                var newlist = daa.OrderBy(i => i.Times).ToList();

                if (!string.IsNullOrEmpty(param.sSearch))
                {
                    newlist = daa;
                    daa.Where(c => c.TrackName.Contains(param.sSearch)
                                         ||
                              c.ArtistName.Contains(param.sSearch)
                                         ||
                              c.TrackName.Contains(param.sSearch));
                }
                else
                {
                    newlist = daa;
                }

                var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
                Func<Company, string> orderingFunction = (c => sortColumnIndex == 1 ? c.Name :
                                                                    sortColumnIndex == 2 ? c.Address :
                                                                    c.Town);

                var sortDirection = Request["sSortDir_0"]; // asc or desc
                if (sortDirection == "asc")
                    newlist = daa.OrderBy(i => i.Times).ToList();
                else
                    newlist = daa.OrderByDescending(i => i.Times).ToList();

                var displayedCompanies = newlist; 

               // var listOrder = daa.Where(i => i.Date >= Convert.ToDateTime(StartDate) && i.Date <= Convert.ToDateTime(EndDate)).ToList();

                    return Json(new { sEcho = param.sEcho,
                                      iTotalRecords = newlist.ToList().Count(),
                                      iTotalDisplayRecords = newlist.ToList().Count(),
                                      aaData = daa
                    }, JsonRequestBehavior.AllowGet);
                }

Any help would be a great help :) Thanks in advanced.

Answer 1

Collection object does not have DateTime property. It has Date property.

Change DT configuration accordingly:

$('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "TopPlayedInVenueList2",
        "bProcessing": true,
        "aoColumns": [ 
    { "mData": "TrackID" },
    { "mData": "Date", "sType": 'date' },
    { "mData": "TrackName" },
    { "mData": "ArtistName" },
    { "mData": "Times" }
        ]
    });

Answer 2

How to Display Date in "dd/MM/yyyy" format in Datatable js data table column.

<script>

    $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "TopPlayedInVenueList2",
        "bProcessing": true,
        "aoColumns": [
                        { "mData": "TrackID" },
                        { "mData": "DateTimes", "sType": 'date' },
                        { "mData": "TrackName" },
                        { "mData": "ArtistName" },
                        { "mData": "Times" }
        ],
        "columnDefs": [
                            {
                                "render": function (data, type, row) {
                                    debugger;
                                    var pattern = /Date\(([^)]+)\)/;
                                    var results = pattern.exec(data);
                                    var date = new Date(parseFloat(results[1]))
                                    var month = date.getMonth() + 1;
                                    var day = date.getDate();
                                    return (day > 9 ? day : "0" + day) + "/" + (month > 9 ? month : "0" + month) + "/" + date.getFullYear();
                                },
                                "targets": 1
                            }
                       ]
    });

</script>

I hope this will help.