locked
DataTables Date/Time sorting DD/MM/YYYY HH:mm a RRS feed

  • Question

  • User1352447851 posted

    I am trying to get datatables to sort some dates DD/MM/YYYY HH:mm a) which are sent to the page as strings.

    I have been trying to use libraries like https://datatables.net/blog/2014-12-18, but everything I try doesn't work as expected, or just renders all the js on my page unresponsive.

            $.fn.dataTable.moment('DD:MM:YYYY HH:mm a');    

            $('table.display-a).DataTable({

                "scrollX": true,

                "order": [[5, "desc"]],

                columnDefs: [{

                    orderable: false,

                    targets: [6]

                }]

            });

    Friday, April 5, 2019 12:23 PM

Answers

  • User839733648 posted

    Hi Shadow_Kittencorn,

    According to your description and code, I'm sorry I could not reproduce your issue.

    Instead, I've made a sample which could sort DD/MM/YYYY HH:mm a format, maybe you could refer to.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
        <script src="http://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
        <script>
            $(function () {
                $.fn.dataTable.moment("DD/MM/YYYY HH:mm a");
                $('#example').DataTable({
                    "scrollX": true,
                    "order": [[2, "desc"]]
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="example" class="display" style="width: 100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Company</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>16/05/2017 05:44 pm</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>15/05/2017 05:43 pm</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>12/02/2017 05:43 pm</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>13/05/2017 05:45 am</td>
                    </tr>
                    <tr>
                        <td>Airi Satou</td>
                        <td>Accountant</td>
                        <td>11/05/2017 05:41 pm</td>
                    </tr>
                    <tr>
                        <td>Brielle Williamson</td>
                        <td>Integration Specialist</td>
                        <td>13/05/2017 05:41 pm</td>
                    </tr>
                    <tr>
                        <td>Herrod Chandler</td>
                        <td>Sales Assistant</td>
                        <td>12/05/2017 05:41 pm</td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
    </html>
    

    result:

    If possible, please provide more information which could reproduce your issue so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 8, 2019 6:36 AM

All replies

  • User2053451246 posted

    I am trying to get datatables to sort some dates DD/MM/YYYY HH:mm a) which are sent to the page as strings.

    I have been trying to use libraries like https://datatables.net/blog/2014-12-18, but everything I try doesn't work as expected, or just renders all the js on my page unresponsive.

            $.fn.dataTable.moment('DD:MM:YYYY HH:mm a');    

            $('table.display-a).DataTable({

                "scrollX": true,

                "order": [[5, "desc"]],

                columnDefs: [{

                    orderable: false,

                    targets: [6]

                }]

            });

    I use this successfully:

    "columnDefs": [
    	{
    		targets: [4],
    		render: function (data, type) {
    			if (data !== null) {
    				var wrapper = moment(new Date(parseInt(data.substr(6))));
    				return wrapper.format("M/D/YYYY h:mm:ss A");
    			}
    		}
    	}
    ]

    Don't bother with this line; you should not need it.

    $.fn.dataTable.moment('DD:MM:YYYY HH:mm a');

    Friday, April 5, 2019 2:14 PM
  • User839733648 posted

    Hi Shadow_Kittencorn,

    According to your description and code, I'm sorry I could not reproduce your issue.

    Instead, I've made a sample which could sort DD/MM/YYYY HH:mm a format, maybe you could refer to.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
        <script src="http://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
        <script>
            $(function () {
                $.fn.dataTable.moment("DD/MM/YYYY HH:mm a");
                $('#example').DataTable({
                    "scrollX": true,
                    "order": [[2, "desc"]]
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="example" class="display" style="width: 100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Company</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>16/05/2017 05:44 pm</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>15/05/2017 05:43 pm</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>12/02/2017 05:43 pm</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>13/05/2017 05:45 am</td>
                    </tr>
                    <tr>
                        <td>Airi Satou</td>
                        <td>Accountant</td>
                        <td>11/05/2017 05:41 pm</td>
                    </tr>
                    <tr>
                        <td>Brielle Williamson</td>
                        <td>Integration Specialist</td>
                        <td>13/05/2017 05:41 pm</td>
                    </tr>
                    <tr>
                        <td>Herrod Chandler</td>
                        <td>Sales Assistant</td>
                        <td>12/05/2017 05:41 pm</td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
    </html>
    

    result:

    If possible, please provide more information which could reproduce your issue so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 8, 2019 6:36 AM
  • User1352447851 posted

    Thanks, the fix was to include the datatables js before moment 

    Monday, April 8, 2019 2:00 PM