jQuery Datatable 不在数据表列中显示日期数据答案

【问题标题】：jQuery Datatable is not displaying Date data in the datable columnjQuery Datatable 不在数据表列中显示日期数据
【发布时间】：2014-05-14 08:34:42
【问题描述】：

我正在尝试在 jQuery 数据表上显示日期，但我收到以下错误 "Requested unknown parameter 'DateTimes' from the data source for row 0，然后它显示所有其他包含数据的列，但将 DateTimes 列留空。

这是我的View jQuery 数据表代码：

<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>

这是我用于转换日期的服务器端 Controller 代码：

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

编辑：TopPlayedInVenueList2 动作方法控制器代码：

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);
                }

任何帮助都会是很大的帮助 :) 提前致谢。

【问题讨论】：

请粘贴整个 TopPlayedInVenueList2 动作。是否以 JSON 格式返回集合？
@st4hoo - 感谢您的回复。是的，我正在返回 JSON 中的列表集合。我在上面的帖子中更新了我的代码，并添加了Controller 和full body of the DataTable View 的操作方法供您检查。 :) 再次感谢 :)
DateTimes 在 JSON 中显然被命名为 Date，作为您自己的代码文档。

标签： c# jquery-datatables

【解决方案1】：

Collection 对象没有 DateTime 属性。它有 Date 属性。

相应地更改 DT 配置：

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

【讨论】：

没错，或者把Date = p.Field<DateTime>("DateTimes")改成DateTimes = p.Field<DateTime>("DateTimes")

【解决方案2】：

如何在Datatable js数据表列中以“dd/MM/yyyy”格式显示日期。

<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>

我希望这会有所帮助。

【讨论】：