jquery - 修改DataTable属性的值

Question

我有一个DataTable，其中包含(注册日期)日期和状态字段。 在 RegisteredDate 字段中，我想将日期格式显示为“YYYY-MM-DD”，并在状态字段中显示“事件”(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 加载时，它应该按 Id 的降序排列。我怎样才能做到这一点？

/// 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 代码

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

Answer 1

要以所需的格式显示日期时间，您可以使用 moment.js ，要在数据表中使用它，您可以使用数据表的 render 函数。首先，您必须使用 cdn 导入 momentjs，如下所示。

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

导入 momentjs 后，更改您的代码，如下所示。这里我使用了 render 函数来返回我们想要以特定格式显示的内容

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

        });

    });