数据表未按 dd/MM/yyyy 格式的日期排序 Angular

Posted 2023-05-07

【中文标题】数据表未按 dd/MM/yyyy 格式的日期排序 Angular

【英文标题】：Datatable is not sorting with date in dd/MM/yyyy format Angular

【发布时间】：2019-07-02 16:50:50

【问题描述】：

我正在使用带有以下环境的 angular-datatable 插件：

节点版本：v11.1.0 角度版本：7.2.4 angular-cli 版本：7.3.0 jquery 版本：3.3.22 数据表版本：1.10.13 角度数据表版本：^7.0.0

html 是：

<div class="col ">
  <table datatable [dtOptions]="dtOptions"  class="table table-striped" style="font-size: 0.8rem;">
    <thead>
    <tr class="text-center">
      <th scope="col">Coupon Code</th>
      <th scope="col">Coupon State</th>
      <th scope="col">Issuance Channel</th>
      <th scope="col">Create Date</th>
      <th scope="col">Expire Date</th>
      <th scope="col">Number Of Redemptions</th>
      <th scope="col">Redemptions</th>
    </tr>
    </thead>
    <tbody>
    <tr class="text-center" *ngFor="let object of allCoupons">
      <td scope="col">object.couponCode</td>
      <td scope="col">object.couponState</td>
      <td scope="col">object.channel</td>

      <td
        scope="col">object.createDate | date: 'dd/MM/yyyy' </td>

      <td
        scope="col">object.expireDate </td>

      <td scope="col"> object.redemptions.length</td>

      <td>
        <div class="btn-group btn-group-sm w-100">
          <button type="button" class="w-100 btn btn-light fas fa-list-alt "
                  title="See Redemptions"
                  (click)="openRedeemModal(content,object.redemptions)">
          </button>
        </div>
      </td>
    </tr>

    </tbody>
  </table>
</div>

dtOptions 是：

dtOptions: DataTables.Settings = ;

ngOnInit() 
this.dtOptions = 
  columnDefs: [


     targets: 3, type: 'date' 

  ]

;
 

但是，正如您在演示中看到的那样，结果不是按日期排序：

https://angular-datatables-gitter-smpc8z.stackblitz.io

我找不到其他解决问题的方法，我已经尝试了我在网上找到的所有方法。

【问题讨论】：

我找到了一些使用 JQuery 的解决方案，但没有一个真正适用于 angular。

【参考方案1】：

尝试以yyyy/MM/dd 格式输入日期。我认为这可能会解决排序问题，但日期格式会颠倒。

【讨论】：

是的，这是开箱即用的。但问题是我想要 dd/MM/yyyy

试着把它像这样<span>yyyy/MM/dd<span>dd/MM/yyyy 并隐藏在css中的跨度span display : none 。看到这个想法here

【参考方案2】：

我终于能够解决这个问题。放在这里以备将来参考。

需要的是获得以下插件（代码不是我的）

jQuery.extend( jQuery.fn.dataTableExt.oSort, 
"date-euro-pre": function ( a ) 
var x;

if ( $.trim(a) !== '' ) 
  var frDatea = $.trim(a).split(' ');
  var frTimea = (undefined != frDatea[1]) ? frDatea[1].split(':') : [00, 00, 00];
  var frDatea2 = frDatea[0].split('-');
  x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + ((undefined != frTimea[2]) ? frTimea[2] : 0)) * 1;

else 
  x = Infinity;


return x;
,

"date-euro-asc": function ( a, b ) 
return a - b;
  ,

 "date-euro-desc": function ( a, b ) 
return b - a;
 
 );

并在src/plug-ins/date-euro.js创建文件夹

然后在视图（html文件）中我刚刚放：

  <td scope="col">object.createDate | date: 'dd-MM-yyyy'</td>

并将上面的路径添加到scripts: 下的angular.json 中。

而且它有效。