proper way to time sort?

proper way to time sort?

LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1

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

  • allanallan Posts: 64,019Questions: 1Answers: 10,555 Site admin

    Have a look at this blog post which uses MomentJS to solve date / time sorting problems.

    Allan

  • LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1

    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>:

    <script type='text/javascript' src='http://localhost:8888/compass/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
    

    and then at the bottom of the page after the PHP renders the HTML, I have this:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/r-2.1.0/datatables.min.css"/>
    
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/r-2.1.0/datatables.min.js"></script>
    <script type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script type="text/javascript" href="https://cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery.fn.dataTable.moment( 'h:mm a' ); // 9:30 am
    
        var table = jQuery('#EF_event_table').DataTable(
            { "pageLength": 100,  
              "dom": 'irftlp',
                "responsive": 'true',
             "columnDefs": [
                { targets: [ 0, 1, 2, 3 ], className: "dt-nowrap dt-center" },
            { "orderData": [ 0, 1, 4 ],"targets": 0 }, // when sorting by startDate, sort by start time, then class name
            { "orderData": [ 0, 4 ],   "targets": 1 }, // when sorting by startTime, sort by class name
            { "orderData": [ 4, 1 ],   "targets": 4 }  // when sorting by class name, sort by time 
            ]                       
         }
            
         );
    
            // Sort by isWaitlist, startTime, className and redraw
            table.order( [[9, 'asc'], [ 1, 'asc' ], [ 4, 'asc' ]] ).draw();
       
    } );
    </script>
    

    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.

  • LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1

    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:

            $time_format = get_option('time_format'); 
            $start_time = date_i18n($time_format, strtotime($event->start_time)); 
    

    and then the HTML outputs the row like this:

    <td class="dt-nowrap EF_event_time col_1" data-th="Start Time"><?php echo $start_time; ?></td>
    

    Could the other CSS class definitions be interfering somehow?

  • LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1
    Answer ✓

    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!

  • allanallan Posts: 64,019Questions: 1Answers: 10,555 Site admin

    Thanks for posting back - great to hear you've got it working now.

    Allan

  • dineshvemuladineshvemula Posts: 1Questions: 0Answers: 0

    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

This discussion has been closed.