Sortierung nach Datum (TT.MM.JJJJ) in Datentabelle Moment.js mit und Bestell Plugin

Question

ich so ziemlich das gleiche Problem wie Felix hier zu haben scheinen:

Problems with sorting by date (dd.mm.YYYY) in Datatable using Moment.js and Ordering Plugin

Daten in HTML formatiert sind durch PHP: DateTime::createFromFormat('Y-m-d', $date);

Ich betrachtete das richtige moment.js Datumsformat "DD.MM.YYYY". DataTables sortiert die Datumsspalte jedoch alphabetisch.

Das sind meine Code-Schnipsel:

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> 

Jeder sieht, was falsch sein könnte?

BTW: Da ich das Datumsformat, das in HTML ausgegeben wird, steuern kann, würde ich lieber etwas wie den alten iDataSort-Parameter wie angegeben here verwenden. Aber es scheint keine Entsprechung in der aktuellen DataTables-Version zu geben.

Answer 1

Wenn Sie hinzufügen:

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)); 
    } 
}); 

und entfernen Sie diese Zeile:

$.fn.dataTable.moment('DD.MM.YYYY'); 

Es scheint zu funktionieren, ist es das, was Sie erwartet hatten? Bitte überprüfen Sie diese JSFiddle für ein funktionierendes Beispiel, ich habe die Daten geändert, um die Bestellung zu testen.