CODEWITHSUNDEEP
jquerysortingdatetimedatatablesmomentjs
FrankTheTank
FrankTheTank

Reputation: 785

Ultimate Date/Time Sorting Plugin For Jquery Datatables with Moment.js

I am trying to sort a specific column in my jquery dataTable by datetime but am running into some trouble. I included the moment.js and datetime-moment.js libraries and initialized my format but it is still not sorting correctly. It seems to be sorting by string instead of datetime. my javascript is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/date-dd-MMM-yyyy.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
<link href="" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {

        $.fn.dataTable.moment('M/D/YYYY hh:mm:ss a');

        $('#netEventTable').dataTable({
            "bLengthChange": true,
            "paging": false,
            "sPaginationType": "full_numbers",
            "jQueryUI": true,
            "bLengthChange": false,
            //"aoColumnDefs": [
            //    {
            //        "aTargets": [4],
            //        "type": "date-dd-MMM-yyyy"
            //    }
            //],
            "columnDefs": [
                {"type": "datetime-moment", targets: 4}
            ],
            language: {
                paginate: {
                    first: "",
                    last: "",
                    next: "| Next",
                    previous: "Previous |"
                }
            }
        });
    });

</script>

Additionally, I am pretty sure I formatted the date correctly after looking at the Moment.js documentation but here is a view of the website to give you an idea of the format I am targeting. I am specifically trying to make the "Start Time" column format by datetime and would ideally do this in "Estimated Time of Resolution" as well.

enter image description here

I am following this tutorial: https://datatables.net/blog/2014-12-18

Upvotes: 1

Views: 3047

Answers (2)

FrankTheTank
FrankTheTank

Reputation: 785

I found out that I needed to format my columnDefs differently in order to cause the sorting to actually work. The correct code is as follows: 

columnDefs: 
                {
                    targets: 4,
                    render: function (data, type, full, meta) {
                        if (type == 'display') {
                            if (data) {
                                var mDate = moment(data);
                                data = (mDate && mDate.isValid()) ? mDate.format('M/D/YYYY h:mm:ss A') : '';
                            }
                        }
                        return data;
                    }
                }

Upvotes: 1

K Thorngren
K Thorngren

Reputation: 548

Looks like your time format is wrong. Its hard to completely tell from your example but the hours are single digit, not sure about the minutes. Your AM/PM is in upper case. Depending on your minutes you should have either:

$.fn.dataTable.moment('M/D/YYYY h:m:ss A');

or

$.fn.dataTable.moment('M/D/YYYY h:mm:ss A');

The Moment.js docs will provide specifics regarding the date and time formats.

Upvotes: 0

Related Questions