Search code examples
jqueryasp.netasp.net-mvcdatatables

Sorting datatable using ultimate date plugin not working

I'm using datatables installed from nugget package. And my table currently looks like this: CurrentTable I would like to sort my table on "Startdatum". I added following code to the head of my view:

<h2>Index</h2>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>

And this to my datatable function which is rendered on the bottom of the view:

@section scripts
 {
    <script>
        //wachten tot pagina volledig ingeladen is
        $(document).ready(function () {
            $.fn.dataTable.moment('DD/MM/YYYY HH:mm:ss');
            $("#mytable").DataTable({
                "order": [[4, "asc"]], //or asc 
                columnDefs: [
                { type: "date-euro", targets: 4 }
            ]
});
        });
    </script>
}

My autocomplete doesn't recognize .moment, and the table isn't sorted on time correctly as you can see in the image. Does anyone know what I'm doing wrong?

Solution

  • The main error is that you need other library to match with type: "date-euro":

    <script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/date-euro.js"></script>

    Then, you have bad formatted dates. You are mixing dates like 1/02/2019 and 10/02/2019. You have to use the second option, for example, in C# you have to use myDate.ToString("dd/MM/yyyy HH:mm:ss") in all dates. See example below:

    enter image description here

    Finally, I'm not sure, but I think that $.fn.dataTable.moment('DD/MM/YYYY HH:mm:ss'); is not neccesary if you use date-euro in column def.