DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Date Sorting Problem

Date Sorting Problem

enorthropenorthrop Posts: 17Questions: 5Answers: 0
in Free community support

Hello!

I am having an issue with how my table is sorting the date column. It doesn't appear to ascend or descend the data chronologically:

6/8/2019
6/6/2019
6/10/2019
6/9/2019
6/10/2019

From what I have gathered from the forums it seems as though the columns data is being treated as strings which is what is throwing off the sort. I thought that I could just get away with adding this bit code to my script, but it doesn't appear to be working:

"columnDefs": [{"type": "date", "targets": 0}]

That isn't fixing the problem, however. What am I missing? Any help would be greatly appreciated!

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    There are many posts in here about date sorting. For example:
    https://datatables.net/forums/discussion/53126

  • enorthropenorthrop Posts: 17Questions: 5Answers: 0

    Yeah, I've been scouring through posts and I've tried a few of the options.

    I've added:

    $.fn.dataTable.moment( 'HH:mm MMM D, YY' );

    Along with the CDN's to my code. That didn't appear to do the trick either. Seems like most of what I find are users wanting to change the appearance of the date display (such as to dd/mm/yy).

  • kthorngrenkthorngren Posts: 21,682Questions: 26Answers: 5,019

    You need to make sure the format you specify matches the format you have using this:
    http://momentjs.com/docs/#/displaying/

    The dates you listed as your data does not match the format you are specifying. It should look more like this:

    $.fn.dataTable.moment( 'M/D/YYYY' );

    Kevin

  • enorthropenorthrop Posts: 17Questions: 5Answers: 0

    Thanks for the response! I was neglecting to change the format. After editing my code, however, I am still not getting the result that I want. I've got both CDN's added to my code along with the new code that you provided to my script and I am not having any luck. Should just be as follows, correct?

    DataTable Script:

    $(document).ready(
    function () {   
        $.fn.dataTable.moment('M/D/YYYY');
        $('#reportTable').DataTable(
            {
                  .
                  .
                  .
            });
    }
);

    Page code:

    <head>
    @* Links for the style sheets *@
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jszip-2.5.0,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.css" /> @* Needed for pagination and Copy button *@
    <link rel="stylesheet" type="text/css" href="~/Content/dataTables.bootstrap.css" /> @* Button and pagination styles *@
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> @* Style sheet used for DatePicker *@
    <link rel="stylesheet" href="/resources/demos/style.css"> @* Style sheet used for DatePicker *@

    @* Links for the DataTable and various buttons (PDF, Excel, Copy, Print) *@
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> @* Required for DataTable *@
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> @* Required for DataTable *@
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> @* Required for DataTable *@
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script> @* Required for all buttons *@
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script> @* Required for Copy, Excel, and PDF buttons *@
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script> @* Required for all buttons *@
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> @* Required for Excel button*@
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> @* Required for PDF button *@
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> @* Required for PDF button *@
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> @* Required for Date sort *@
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script> @* Required for Date sort *@
</head>
  • kthorngrenkthorngren Posts: 21,682Questions: 26Answers: 5,019
    Answer ✓

    Without seeing an example test case with your data its hard to say. Your data example works here:
    http://live.datatables.net/wevugexo/1/edit

    If you have something other than dates that match the format specified then the plugin won't work. Do you have other data in that column?

    If you continue to have difficulties please post a link to your page or a test case replicating the issue or update my test case.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • enorthropenorthrop Posts: 17Questions: 5Answers: 0

    I'll have to look a bit more into then. There isn't any other data in the column, but I don't have the site live yet to show an example. If I can get it launched then maybe I will circle back here. :)

    Thanks for the responses!

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.