我好像和菲利克斯一样有这个问题：
Problems with sorting by date (dd.mm.YYYY) in Datatable using Moment.js and Ordering Plugin
HTML中的日期由PHP格式化：DateTime::createFromFormat('Y-m-d', $date);
我考虑了正确的moment.js日期格式＆＃34; DD.MM.YYYY＆＃34;。但是，DataTables按字母顺序对日期列进行排序。
这些是我的代码段：
JavaScript的：
$(document).ready(function() {
// Setup - add a text input to each header cell for filtering
$('#dt-requests thead th').each( function () {
var title = $(this).text();
$(this).html( title+'<br><input type="text" placeholder="Filter" />' );
} );
// Setup - register the format "tt.mm.jjjj" to detect (by moment.js) and order (by DataTables.js)
$.fn.dataTable.moment('DD.MM.YYYY');
// DataTable
var table = $('#dt-requests').DataTable({
'paging': false, // Keine Paginierung
'order': [[0, 'desc']], // Sortiere die erste Spalte absteigend (=> neueste ID zuerst, somit chronologisch)
'columnDefs': [ // Set column definition initialisation properties
{ // Aktionenspalte soll für den User nicht sortierbar sein
'orderable': false,
'targets': 6
},
{ // Datum sortierbar machen
'type': 'date-moment',
'targets': 5
}
],
language: {
search: 'Filtern:'
}
});
// Individual column searching (text inputs).
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
// Stop the input fields triggering column sorting when clicking them.
$('input', table.column(colIdx).header()).on('click', function(e) {
e.stopPropagation();
});
});
});
HTML：
.
.
.
<script type="text/javascript" charset="utf8" src="/vendor/moment.js/2.8.4/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/jQuery_DataTables/1.10.12/datatables.css">
<script type="text/javascript" charset="utf8" src="/vendor/jQuery_DataTables/1.10.12/datatables.js"></script>
<script type="text/javascript" charset="utf8" src="/vendor/jQuery_DataTables/plugins/1.10.12/sorting/datetime-moment.js"></script>
.
.
.
<table id="dt-requests" class="table table-striped table-bordered table-hover display dataTable" role="grid" aria-describedby="dt-requests_info">
<caption>Übersicht</caption>
<thead>
<tr role="row">
<th class="verticalBottom sorting" tabindex="0" aria-controls="dt-requests" rowspan="1" colspan="1" style="width: 70px;" aria-label="ID: activate to sort column ascending">ID<br><input type="text" placeholder="Filter"></th>
<th class="verticalBottom sorting" tabindex="0" aria-controls="dt-requests" rowspan="1" colspan="1" style="width: 259px;" aria-label="Investitionsgegenstand: activate to sort column ascending">Investitionsgegenstand<br><input type="text" placeholder="Filter"></th>
<th class="verticalBottom sorting" tabindex="0" aria-controls="dt-requests" rowspan="1" colspan="1" style="width: 130px;" aria-label="Status: activate to sort column ascending">Status<br><input type="text" placeholder="Filter"></th>
<th class="verticalBottom sorting" tabindex="0" aria-controls="dt-requests" rowspan="1" colspan="1" style="width: 70px;" aria-label="Besitzer: activate to sort column ascending">Besitzer<br><input type="text" placeholder="Filter"></th>
<th class="text-right verticalBottom sorting" tabindex="0" aria-controls="dt-requests" rowspan="1" colspan="1" style="width: 115px;" aria-label="€ Investitions-volumen: activate to sort column ascending">€ Investitions-volumen<br><input type="text" placeholder="Filter"></th>
<th verticalbottom="" class="sorting_asc" tabindex="0" aria-controls="dt-requests" rowspan="1" colspan="1" style="width: 97px;" aria-label="Antragsdatum: activate to sort column descending" aria-sort="ascending">Antragsdatum<br><input type="text" placeholder="Filter"></th>
<th width="15%" class="verticalBottom sorting_disabled" rowspan="1" colspan="1" style="width: 133px;" aria-label="Aktion">Aktion<br><input type="text" placeholder="Filter"></th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">ID</th>
<th rowspan="1" colspan="1">Investitionsgegenstand</th>
<th rowspan="1" colspan="1">Status</th>
<th rowspan="1" colspan="1">Besitzer</th>
<th class="text-right" rowspan="1" colspan="1">€ Investitions-<br>volumen</th>
<th rowspan="1" colspan="1">Antrags-<br>datum</th>
<th width="15%" rowspan="1" colspan="1">Aktion</th>
</tr>
</tfoot>
<tbody>
<tr class="even" id="609" role="row">
<td class="">609</td>
<td>2.1 Investitionsgegenstand (und sonstiger Investitionszweck)<br>
<div class="btn-group attachments">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<i class="glyphicon glyphicon-paperclip"> </i> Anlagen <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Beschreibung des Investitionsvorhabens: <a target="_blank" href="download/609/135"><span class="attFileName">LanguageMgr.dll</span></a></li>
</ul>
</div>
</td>
<td>An SPOC gegeben</td>
<td>muelfrit</td>
<td class="text-right">5.000</td>
<td class="sorting_1">04.07.2016</td>
<td>
<div class="btn-group">
<a href="#" class="btn btn-primary"><i class="fa fa-cog"></i> Aktionen</a>
<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a target="_blank" href="preview/609"><i class="glyphicon glyphicon-search"></i> Vorschau</a></li>
<li><a href="edit/609"><i class="fa fa-pencil"></i> Bearbeiten</a></li>
<li><a data-target="#modalInquiry609" data-toggle="modal" href="#"><i class="glyphicon glyphicon-repeat"></i> Rückfrage an SB</a></li>
<li><a data-target="#modalPassToABV609" data-toggle="modal" href="#"><i class="glyphicon glyphicon-repeat"></i> In Pool zurückstellen</a></li>
<li><a data-target="#modalAudit609" data-toggle="modal" href="#"><i class="glyphicon glyphicon-arrow-right"></i> Auf Prüfstatus setzen</a></li>
</ul>
</div>
</td>
</tr>
<tr class="ownRequest odd" id="608" role="row">
<td class="">608</td>
<td>
2.1 Investitionsgegenstand (und sonstiger Investitionszweck)</td>
<td>Entwurf</td>
<td>mayehein</td>
<td class="text-right">5.000</td>
<td class="sorting_1">04.07.2016</td>
<td>
<div class="btn-group">
<a href="#" class="btn btn-primary"><i class="fa fa-cog"></i> Aktionen</a>
<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a target="_blank" href="preview/608"><i class="glyphicon glyphicon-search"></i> Vorschau</a></li>
<li><a href="submit/608"><i class="fa fa-paper-plane"></i> an SPOC geben</a></li>
<li><a href="edit/608"><i class="fa fa-pencil"></i> Bearbeiten</a></li>
</ul>
</div>
</td>
</tr>
<tr class="ownRequest even" id="607" role="row">
<td class="">607</td>
<td>
2.1 Investitionsgegenstand (und sonstiger Investitionszweck)</td>
<td>Entwurf</td>
<td>mayehein</td>
<td class="text-right">5.000</td>
<td class="sorting_1">04.07.2016</td>
<td>
<div class="btn-group">
<a href="#" class="btn btn-primary"><i class="fa fa-cog"></i> Aktionen</a>
<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><a target="_blank" href="preview/607"><i class="glyphicon glyphicon-search"></i> Vorschau</a></li>
<li><a href="submit/607"><i class="fa fa-paper-plane"></i> an SPOC geben</a></li>
<li><a href="edit/607"><i class="fa fa-pencil"></i> Bearbeiten</a></li>
</ul>
</div>
</td>
</tr>
.
.
.
</tbody>
</table>
有人看到可能出错的地方吗？
顺便说一句：由于我可以控制输出到HTML的日期格式，我宁愿使用遗留的iDataSort参数，如here所述。但是目前的DataTables版本似乎没有相应的东西。
答案 0 :(得分：0)
如果你添加：
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-moment-pre": function ( a ) {
return ~~moment(a, "DD.MM.YYYY").format("X");
},
"date-moment-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-moment-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
并删除此行：
$.fn.dataTable.moment('DD.MM.YYYY');
它似乎有效，是你所期待的吗？请查看此JSFiddle以获取一个工作示例，我已更改日期以测试订购。