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

Question

I seem to have pretty much the same problem as Felix here:

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

Dates in HTML are formatted by PHP: DateTime::createFromFormat('Ym-d', $date);

I considered the correct moment.js date format "DD.MM.YYYY". However DataTables sorts the date column alphabetically.

These are my code snippets:

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>

Anyone sees what might be wrong?

BTW: Since I can control the date format that is outputted into HTML I would rather use something like the legacy iDataSort parameter as stated here . But there seems to be no equivalent in the current DataTables version.

Answer 1

If you add this:

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

and remove this line:

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

It seems to work, is that what you were expecting? Please check this JSFiddle for a working example, I've altered the dates to test the ordering.