Как мне отформатировать столбец даты и времени в jQuery Datable (на стороне сервера) - PullRequest
Новая
       8

Как мне отформатировать столбец даты и времени в jQuery Datable (на стороне сервера)

0 голосов
/ 19 мая 2018

Я внедряю данные на стороне сервера jQuery.У меня есть 1 столбец даты и 2 столбца даты и времени.Все 3 отображаются в виде данных в неправильном формате.

Дата получения: / Дата (1373947200000) / (Дата)

Дата создания: / Дата (1374845903000) / (Дата и время)

Дата обновления: / Дата (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>
}

Ниже приведен код c #, возвращающий формат json.

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

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Вы можете использовать стороннюю библиотеку "moment.js".Убедитесь, что вы добавили в библиотеку moment.js 

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

Надеюсь, это решение подойдет. Обновление: вот официальная ссылка Moment.js

0 голосов
/ 19 мая 2018 
/Date(1374845903000)/

Это представление Epoch значения DateTime, которое у вас есть.Сериализатор json (используемый asp.net mvc) преобразовал значение объекта DateTime в соответствующее время эпохи Unix (количество секунд, прошедшее с 00:00:00 UTC), четверг, 1 января 1970 г.).

Теперь для данных, для каждого столбца, вы можете переопределить способ его отображения в ячейке.Все, что вам нужно сделать, это выполнить некоторый код javascript, чтобы преобразовать это значение эпохи в читаемую строку.Поэтому мы напишем небольшой вспомогательный метод для форматирования значения метки времени в удобочитаемом строковом представлении и определим этот маленький вспомогательный метод в качестве обратного вызова для 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); }
            }
        ]
    });

});

Это должно исправить дату созданияколонка.Сделайте то же самое и для других столбцов.

...