如何在 jQuery Datatable（服务器端）中格式化日期时间列

Question

我正在实现 jQuery 服务器端数据表。我有 1 个日期列和 2 个日期时间列。所有 3 个都以错误的格式显示在数据表上。

收到日期：/Date(1373947200000)/（日期）

创建日期：/Date(1374845903000)/（日期时间）

更新日期：/Date(1374845903000)/（日期时间）

我怎样才能以正确的格式显示？

.cshtml

<table id="disparityForm" class="ui celled table" style="width:100%">
    <thead>
        <tr>
            <th>Status</th>
            <th>Received Date</th>
            <th>Member ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Created User</th>
            <th>Created Date</th>
            <th>Updated User</th>
            <th>Updated Date</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Status</th>
            <th>Received Date</th>
            <th>Member ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Created User</th>
            <th>Created Date</th>
            <th>Updated User</th>
            <th>Updated Date</th>
        </tr>
    </tfoot>
</table>

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/media/css/dataTables.semanticui.min.css" rel="stylesheet" />

@section scripts{
    <script src="~/Scripts/DataTables/media/js/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/DataTables/media/js/dataTables.semanticui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#disparityForm").DataTable({
                "ajax": {
                    "url": "/DisprtyForm/GetList",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "STS", "name": "STS" },
                    { "data": "RECEIVED_DATE", "name": "RECEIVED_DATE" },
                    { "data": "MBR_AGP_ID_NUM", "name": "MBR_AGP_ID_NUM" },
                    { "data": "MBR_FST_NME", "name": "MBR_FST_NME" },
                    { "data": "MBR_LST_NME", "name": "MBR_LST_NME" },
                    { "data": "CREATE_USR_ID", "name": "CREATE_USR_ID" },
                    { "data": "AUDIT_CREATE_DT", "name": "AUDIT_CREATE_DT" },
                    { "data": "UPDT_USR_ID", "name": "UPDT_USR_ID" },
                    { "data": "AUDIT_UPDT_DT", "name": "AUDIT_UPDT_DT" },
                ],

                "serverSide": "true",
                "order": [0, "asc"],
                "processing": "true",
                "language": {
                    "processing": "processing...Please wait"
                }
            });
        })

    </script>
}

下面是返回json格式的c#代码。

 [HttpPost]
    public ActionResult GetList()
    {
        //Server side Parameters
        int start = Convert.ToInt32(Request["start"]);
        int length = Convert.ToInt32(Request["length"]);
        string searchValue = Request["search[value]"];
        string sortColumnName = Request["columns[" + Request["order[0][column]"] + "][Name]"];
        string sortDirection = Request["order[0][dir]"];


        List<DISPRTY_FORM> disprtyFormList = new List<DISPRTY_FORM>();
        using (DBModel db = new DBModel())
        {
            disprtyFormList = db.DISPRTY_FORM.ToList<DISPRTY_FORM>();
            int totalrows = disprtyFormList.Count;

            //Todo filtering

            int totalRowsAfterFiltering = disprtyFormList.Count;

            //sorting
            disprtyFormList = disprtyFormList.OrderBy(sortColumnName + " " + sortDirection).ToList<DISPRTY_FORM>();

            //paging
            disprtyFormList = disprtyFormList.Skip(start).Take(length).ToList<DISPRTY_FORM>();

            var jsonResult = Json(new { data = disprtyFormList, draw = Request["draw"], recordsTotal = totalrows, recordsFiltered = totalRowsAfterFiltering }, JsonRequestBehavior.AllowGet);
            jsonResult.MaxJsonLength = int.MaxValue;

            return jsonResult;
        }
    }

Answer 1

您可以使用第三方库“moment.js”。确保您已添加 moment.js 库

  { data: "AUDIT_CREATE_DT" ,
                          "render": function (value) {
                              if (value === null) return "";
                              return moment(value).format('DD/MM/YYYY');
                          }

我希望这个解决方案能够奏效。 更新： 这里是Moment.js的官方链接

Answer 2

/Date(1374845903000)/ 

这是您拥有的 DateTime 值的 Epoch 表示。 json 序列化程序（由 asp.net mvc 使用）将 DateTime 对象值转换为其相应的 unix 纪元时间（自 1970 年 1 月 1 日星期四 00:00:00 协调世界时 (UTC) 以来经过的秒数)。

现在对于数据表，对于每一列，您可以覆盖它在单元格中的呈现方式。您所要做的就是执行一些 javascript 代码来将此 epoch 值转换为可读字符串。因此，我们将编写一个小助手方法来将时间戳值格式化为可读的字符串表示形式，并将该小助手方法指定为这些日期列的 render 的回调

$(document).ready(function () {

    // Accepts the epoch timestamp value and return a Date string
    function getDateString(date) {
        var dateObj = new Date(parseInt(date.substr(6)));
        return dateObj.toDateString();
    }

    $('#disparityForm').DataTable({
        "ajax": {
            "url": "/Home/GetList",
            "type": "POST",
            "datatype": "json"
        },
        "columns": [
            { "data": "STS", "name": "STS" },
            { "data": "MBR_FST_NME", "name": "MBR_FST_NME" },
            {
                "data": "AUDIT_CREATE_DT", "name": "AUDIT_CREATE_DT", 
                "render": function (data) { return getDateString(data); }
            }
        ]
    });

});

这应该修复创建的日期列。对其他列也这样做。

Answer 3

AUDIT_CREATE_DT

{
    "data": "AUDIT_CREATE_DT",
    "render": function (data) {
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
    }
}