我正在使用具有以下环境的angular-datatable插件:
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.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
下添加了上面的路径。
它有效。
尝试以yyyy/MM/dd
格式输入日期。我认为这可能会解决排序问题,但日期格式将被颠倒。