HELP! Datatables sorting not working, and breaks when trying to use MOMENT add-in

vitoasaro

I have a date column in my datatable that appears as "Mon, Aug 24" (no year), and it doesn't sort correctly.

I added the javascript add-in libraries for "moment" (moment.min.js and datetime-moment.js)

I added the line below per the site example before my datatable definition:

 $.fn.dataTable.moment( 'dddd, MMM D' );

This completely breaks the functionality of my datatable. Can someone help me figure this out?
This is the jquery setup of my datatable:

<script type="text/javascript">
    $(document).ready(function(){

    snt = $('#glancetable').dataTable(
         { 
        "columnDefs": [
    { "orderable": false, "targets": 1 },
    { "orderable": false, "targets": 3 },
    { "orderable": false, "targets": 5 },
    { "orderable": false, "targets": 6 },
    { "orderable": false, "targets": 7 },
    { "orderable": false, "targets": 8 },
    { "orderable": false, "targets": 9 },
    { "orderable": false, "targets": 10 }   
  ],
        "lengthMenu": [[-1, 10,20,40], ["All", 10, 20, 40]],
        "scrollY": "450px",
        "scrollCollapse": false,
        "bJQueryUI": true,
    "columns": [ 
            { "name": "performanceid" },
            { "name": "status" },
            { "name": "date" },
            { "name": "time" },
            { "name": "performance" },
            { "name": "buylink" },
            { "name": "ticketprice" },
            { "name": "dinnershow" },
            { "name": "roomshow" },
            { "name": "jrsuiteshow" },
            { "name": "suiteshow" }
        ],
        "dom": '<"H"ifr>t<"F"<"toolbar">lp>',
            fnDrawCallback: function() {
            clickRowHandler();
            }
        }
        );
        var table = $('#glancetable').DataTable();
        table.column( 0 ).visible( false );  // Hides REC# column
        });
    
      /* Click event handler */
    function clickRowHandler() {

//      $('#glancetable tr').bind('click', function () {
//       theRow = snt.fnGetData( this );
//       alert("Row: "+theRow[0]);
//      });
        $('#glancetable tr').bind('dblclick', function () {
        var rData = snt.fnGetData( this );
        var noteID= rData[0];
            alert("Enabled: "+rData[0]);

        });
};

THANKS IN ADVANCE!

allan

Hi,

That looks like it should work in principle. Can you link to the page or set up a test cast so we can debug the problem please?

Thanks,
Allan

vitoasaro

Allan,
Sorry for the delay in getting back to you. I have two pages available for you to view:

This page has the datatable.moment line
http://humphreysconcerts.com/glancetest.cfm

And this page has the semi-working table:
http://humphreysconcerts.com/glancetest2.cfm

I say semi-working because the sorting on the date column doesn't work properly, which is why I need the datatable.moment sorting.

Please let me know if you see anything.

Thanks again for the help.

vitoasaro

Actually,
I was able to leave out the moment sort, and then in the <TD> tag I included the "data-order" with a converted epoch date of the date column. ColdFusion example:

<cfset epochStartDate = createdatetime( '1970','01','01','00','00','00' )>
<cfset epochDate = datediff( 's', epochStartDate, PerformanceDate)
<TD data-order="#epochdate#"> #performanceDate#</TD>

The further down in the dataTable definition I have:

$('#glancetable').dataTable(
         { 
     "order": [ 2, 'asc' ],
...

This achieved the sorting I needed on the Data Table.
I still don't know why the moment function didn't work.

allan

Hi,

I'm getting a 404 error from the page above. I guess you've removed it now that you've got the attribute sorting working? Either way, good to hear you've got it working now.

Allan