Angular 8 数据表日期排序问题 dd/mm/yyyy

Posted 2023-05-09

【中文标题】Angular 8 数据表日期排序问题 dd/mm/yyyy

【英文标题】：Angular 8 Datatable Date Sorting Issue dd/mm/yyyy

【发布时间】：2020-08-15 15:36:05

【问题描述】：

我无法在 Angular 数据表中按升序对日期进行排序。请帮助。我从 api 获得的日期格式是 yyyy-mm-dd，我使用渲染函数将其转换为 dd-mm-yyyy。

由于我只想在数据表中的 dd-mm-yyyy 中显示日期，因此我正在对其进行转换。

请查看图片以供参考（第一行和最后一行）

HTML 类

   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"  class="row-border hover">
   </table>

在组件类中我使用了 dtoptions 来显示数据

this.dtOptions = 

  ajax: 
    url: environment.api_base_url + "abc",

    method: 'POST',
    data: 
      "abccreateddate": this.myDate,

    ,
    dataSrc: function (json) 
      //alert(json);
      let return_array = [];
      return_array = json;
      return return_array;
    

  ,
  "order": [[2, "asc"]],
  'columnDefs': [  'type': 'date', 'targets': 2  ],
  columns: [

    
      title: 'ReportName',
      data: 'reportname',

    ,
    
      title: 'Report Start Date',
      data: 'reportstartdate',
      "render": function (data) 
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return  ("0" + date.getDate()).slice(-2) +"-"+ (month.toString().length > 1 ? month : "0" + month) + "-" + date.getFullYear();
    
    ,
    
      title: 'Report Due Date',
      data: 'reportduedate',
      "render": function (data) 
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return  ("0" + date.getDate()).slice(-2) +"-"+ (month.toString().length > 1 ? month : "0" + month) + "-" + date.getFullYear();
    
  

]

我的 API 回复：

["reportname":"TestReport1","re​​portstartdate":"2020-04-30","re​​portduedate":"2020-04-30", "reportname":"Monthlynew","re​​portstartdate":"2020-03-28","re​​portduedate":"2020-04-04" ]

please check pic for reference

【问题讨论】：

那里没有对任何内容进行排序的代码，并且没有看到您要排序的数据，答案是菠萝 - 哦，等待是 "order": [[2, "asc"]], 应该按第 2 列排序，这被描述为类型“日期”？

嗨 Jaromanda，我已经添加了 json 响应

属性名称reportstartdate 和reportduedate 与columns:[] 有什么关系？这些列似乎是reportname、creationdate 和lastdate - 但数据有reportname、reportstartdate 和reportduedate

是的，对不起，我已经编辑过了

对，现在看起来更可信了......如果你删除 columnDefs 属性会发生什么 - 这会很有趣，因为 yyyy-mm-dd 顺序中的日期可以使用简单的 alpha 排序进行排序跨度>

【参考方案1】：

尝试以下render 方法

render: function ( data, type) 

    var dateDisplay = data.split('-').reverse().join('-');
    return type === "display" || type === "filter" ? dateDisplay : data;

基于：datatables manual for render function 请参阅“转换数据”

作为奖励，我提供了一种更简单的方法来将 yyyy-mm-dd 更改为 dd-mm-yyyy