Date Column Sorting with Moment
Date Column Sorting with Moment
ericcota
Posts: 7Questions: 1Answers: 0
I tried to get date column sorting working with Moment and the example that is here:
https://gist.github.com/Kriztinemendoza/aa84a3dc8f579a380ce210c0ec08e034#file-fixdatesortingdatatablesdotnet-html
After some playing around I found it worked on older versions of datatables but not the latest version.
If I change the datatables version to 1.10.13 or higher it no longer works. Works fine with the provided 1.10.10 and each version up to and including 1.10.12. I did change the example slightly to use my data and my data format of M/D/YYYY HH:mm a
Did something change with datatable that I am not able to find associated documentation for to make this work?
Full code below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
</head>
<body>
<div>
<table id="tblDataTable" class="table table-striped table-hover table-bordered dataTable no-footer" cellpadding="0" border="0" role="grid" aria-describedby="tblDataTable_info"><thead><tr role="row"><th class="sorting_desc" tabindex="0" aria-controls="tblDataTable" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 201.25px;" aria-sort="descending">Date</th><th class="sorting" tabindex="0" aria-controls="tblDataTable" rowspan="1" colspan="1" aria-label="Person: activate to sort column ascending" style="width: 169.25px;">Person</th><th class="sorting" tabindex="0" aria-controls="tblDataTable" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 96.25px;">Action</th><th class="sorting" tabindex="0" aria-controls="tblDataTable" rowspan="1" colspan="1" aria-label="Object: activate to sort column ascending" style="width: 105.25px;">Object</th><th class="sorting" tabindex="0" aria-controls="tblDataTable" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 333.25px;">Description</th></tr></thead><tbody><tr role="row" class="odd"> <td class="OneLine sorting_1">8/28/2019 5:53 am</td> <td >Cota, Eric</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">6/19/2018 11:57 am</td> <td >Walker, Rodney</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">5/15/2019 2:19 pm</td> <td >Cota, Eric</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">2/2/2019 1:17 pm</td> <td >Todd, Keith</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">2/17/2019 4:07 am</td> <td >Mendez, Sergio</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">2/17/2019 11:20 am</td> <td >Howell, Willard</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">2/15/2019 3:15 pm</td> <td >Lloyd, Gerard</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">2/15/2019 12:25 am</td> <td >Lloyd, Gerard</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">2/14/2019 6:52 pm</td> <td >Underwood, Kyle</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">2/14/2019 2:40 pm</td> <td >Todd, Keith</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">2/11/2019 8:39 pm</td> <td >Rogers, Rogelio</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">2/11/2019 8:00 pm</td> <td >Cota, Eric</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">2/11/2019 3:01 pm</td> <td >Lloyd, Gerard</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">2/11/2019 3:00 pm</td> <td >Lloyd, Gerard</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">2/11/2019 2:50 pm</td> <td >Jensen, Adrian</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">12/29/2018 4:41 pm</td> <td >Green, Walter</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">12/14/2018 4:28 pm</td> <td >Vaughn, Sam</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">11/30/2018 7:55 pm</td> <td >Moran, Johnathan</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">11/13/2018 3:58 pm</td> <td >Gomez, Abraham</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">11/13/2018 2:36 pm</td> <td >Webster, Tyrone</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">11/10/2018 12:30 am</td> <td >Keller, Darrin</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">11/1/2018 10:14 pm</td> <td >Curtis, Toby</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">10/8/2018 1:36 am</td> <td >Walker, Rodney</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">10/5/2018 4:27 pm</td> <td >Green, Walter</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">1/29/2019 1:16 pm</td> <td >Walker, Rodney</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="even"> <td class="OneLine sorting_1">1/19/2019 1:12 am</td> <td >Weaver, Jorge</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr><tr role="row" class="odd"> <td class="OneLine sorting_1">1/12/2019 3:06 am</td> <td >Todd, Keith</td> <td >View</td> <td >Documents</td> <td >View Document: Request for Leave</td></tr></tbody></table>
</div>
<!-- Data table Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js?" text="type/javascript"></script>
<!-- Reference to handle dates: https://datatables.net/blog/2014-12-18-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$.fn.dataTable.ext.errMode = 'throw';
$.fn.dataTable.moment('M/D/YYYY HH:mm a');
$('#tblDataTable').DataTable({
responsive: true,
fixedHeader: true,
"paging": false,
columnDefs: [{
target: 0, //index of column
type: 'datetime-moment'
}]
});
});
</script>
</body>
</html>
This discussion has been closed.
Replies
Here is a link to a test case for this issue
http://live.datatables.net/mibebusa/1/edit?html,css,js,output
Scanning through the test case I'm not seeing where the sort is failing. However I think you have the incorrect for the hours. You have
$.fn.dataTable.moment('M/D/YYYY HH:mm a');but your date time field looks like this example5/15/2019 2:19 pm.According to the Moment docs
HHis00 01 ... 22 23. I think you should usehwhich is1 2 ... 11 12.Also, I don't think you need to set
type: 'datetime-moment'as Datatables scans each column to determine the types. It will revert to text format if it finds something that doesn't match the format.Kevin
If you update the test case and change the data tables version to 1.10.13 or greater the sorting stops workings
You are correct. However if you use the correct moment format ,
$.fn.dataTable.moment('M/D/YYYY h:mm a');, that I suggested it appears to work correctly.http://live.datatables.net/nizanuzo/1/edit
Plus you can remove
type: 'datetime-moment'.Kevin
You are correct too!
Thanks for the help!