изменение значения атрибутов DataTable

Question

У меня есть DataTable, в котором есть поле для (RegisteredDate) даты и статуса. В поле RegisteredDate я хочу показать формат даты как «ГГГГ-ММ-ДД» и в поле состояния «Активно» (1) или «Закрыто» (0).

В базе данных значениями примеров RegisteredDate и Status являются ::

   RegisteredDate                   Status
2020-01-03 13:32:11.370                1
2020-01-12 11:23:48.330                1
2020-01-12 11:23:49.923                1

Но в DataTable я получаю значения как /Date(1578823190740)/. Пожалуйста, смотрите прикрепленное изображение.

Кроме того, когда DataTable загружается, он должен быть в порядке убывания идентификатора. Как я могу это сделать?

/// datatable code 
var Popup, dataTable;
    $(document).ready(function () {
        alert("testing...");
        dataTable = $("#tbl_vehicle").DataTable({

            "ajax":{
                "url": "/Vehicles/GetVehicle",
                "type": "GET", 
                "datatype": "json"
            },
            "columns": [
                { "data": "VehicleType" },
                { "data": "Amount" },
                { "data": "RenewPeriod" },
                { "data": "RegisteredDate" },
                { "data": "RegisteredBy" },
                { "data": "Status" },
                { "data": "ModifiedBy" },
                { "data": "ModifiedDate" }
            ],
            "language": {
                "emptyTable" : "No data available, please click on <b>Add</b> button"
            }

        });

    });

код контроллера для загрузки данных

/// controller code
public ActionResult GetVehicle()
{
    List<Vehicle> vehicleList = db.Vehicle.ToList<Vehicle>();
    return Json(new { data = vehicleList }, JsonRequestBehavior.AllowGet);
}

Answer 1

Вы можете просто преобразовать дату в желаемый формат в самом контроллере. Для этого вам нужно добавить строковое свойство RegisteredDateString в класс Model и связать это свойство в datatable вместо RegisteredDate.

 List<Vehicle> vehicleList = db.Vehicle.ToList<Vehicle>();
 vehicleList.ForEach(x => x.RegisteredDateString = 
 x.RegisteredDate.ToString("dd/MM/yyyy",CultureInfo.InvariantCulture));

Answer 2

Для отображения даты и времени в требуемом формате вы можете использовать moment.js, а для использования в таблице данных вы можете использовать render функцию таблицы данных. Прежде всего вы должны импортировать momentjs, используя cdn, как показано ниже.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

И после импорта momentjs измените свой код, как показано ниже. Здесь я использовал функцию рендера для возврата содержимого, которое мы хотим отобразить в определенном формате

var Popup, dataTable;
    $(document).ready(function () {
        alert("testing...");
        dataTable = $("#tbl_vehicle").DataTable({

            "ajax":{
                "url": "/Vehicles/GetVehicle",
                "type": "GET", 
                "datatype": "json"
            },
            "columns": [
                { "data": "VehicleType" },
                { "data": "Amount" },
                { "data": "RenewPeriod" },
                { 
                  "data": "RegisteredDate",
                  "render": function(data){
                    var date = moment(data).format("YYYY-MM-DD");
                    return date;
                  }
                },
                { "data": "RegisteredBy" },
                { 
                  "data": "Status",
                   "render" : function(data){
                      if(data === "true") return "1"
                      else return "0"
                   }
                },
                { "data": "ModifiedBy" },
                { 
                  "data": "ModifiedDate",
                  "render": function(data){
                    var date = moment(data).format("YYYY-MM-DD");
                    return date;
                  }
                }
            ],
            "language": {
                "emptyTable" : "No data available, please click on <b>Add</b> button"
            }

        });

    });