proper way to time sort?
proper way to time sort?

I am trying to get my table to sort correctly by time in the format "9:30 am", and I am getting a little confused by the various options I have seen in the forums, since some are deprecated, and regardless, have not been able to get any of them to work. I currently have this in place:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/1.10.12/sorting/time.js"/>
<script type="text/javascript">
jQuery(document).ready(function() {
var table = jQuery('#EF_event_table').DataTable(
{columnDefs: [
{ "type": 'time-uni', targets: 1 }
]}
);
} );
</script>
and no matter which way it is sorted (ascending or descending), it's not right. 9:30 am is showing before 9:00 am, and when I sort ascending, it starts with 10:00am, goes up to 3:00pm and then shows the 9:00 am options followed by 9:30 am options. What am I doing wrong?
I also tried moments and the ultimate date / time sorting plugin, but that didn't work for me either. Do I need to put anything special in the HTML?
Can somebody post a working example where rows are sorted by a time column? Thanks in advance for your help!
This question has an accepted answers - jump to answer
Answers
Have a look at this blog post which uses MomentJS to solve date / time sorting problems.
Allan
I have tried to implement time sorting with moment.js as indicated in that blog post, but I'm getting a "TypeError: jQuery.fn.dataTable.moment is not a function" error. I'm sure it's something foolish I'm overlooking, but I'm totally stuck! Can you help me figure out what I'm missing? Here's my code:
jQuery is loaded in the html <head>:
and then at the bottom of the page after the PHP renders the HTML, I have this:
I have to use the jQuery notation instead of the $ to get things to work (though I am not sure why), so maybe I just have some sort of syntax error that I'm blind to right now? Thanks for taking a look.
Oops! I realized that part of my error was a syntax mistake in my include of the javascript file (href instead of src), so moment.js wasn't being loaded. But after fixing that, though I no longer get the undefined type error, it is still not formatting my time column properly.
I am using this PHP to format my HTML output for that column:
and then the HTML outputs the row like this:
Could the other CSS class definitions be interfering somehow?
I have figured it out! I didn't realize that the orderData columnDefs were conflicting with the moment sort I was trying to do. When I removed those three lines in the DataTable() init, the call to table.order().draw() after the init did what I needed to do for now, and the time sort is working! Hopefully this info will help someone else, too. Thanks for a great plugin!
Thanks for posting back - great to hear you've got it working now.
Allan
Hi LauraSuzy,
i am also done based upon your requirement of time sorting, but it not working, so can you send me the your static code of time sorting