Moment.js ordering not working

cbarrett

I'm passing in an epoch timestamp and using moment.js to convert to human readable format.

Here is my code for dynamically inputting time and other attributes:

`    var dateString = "";
     var utcOffset = "";
$.each(forecastFeatures[0].featureSet.features, function (i, fc) {
    if (fc.attributes.COUNTY_NO == county_no) {
        var ROAD_TEMP = parseInt(fc.attributes.ROAD_TEMP);
        var ROAD_FROST_PROB = fc.attributes.ROAD_FROST_PROB;
        var BRIDGE_TEMP = parseInt(fc.attributes.BRIDGE_TEMP);
        var BRIDGE_FROST = fc.attributes.BRIDGE_FROST;
        var AIR_TEMP = parseInt(fc.attributes.AIR_TEMP);
        var DEW_POINT = parseInt(fc.attributes.DEW_POINT);
        var WIND_DIRECTION = fc.attributes.WIND_DIRECTION;
        var WIND_SPEED = parseInt(fc.attributes.WIND_SPEED);
        var WIND_GUST = parseInt(fc.attributes.WIND_GUST);
        var PRECIP_TYPE = fc.attributes.PRECIP_TYPE;
        var PRECIP_PROB = parseInt(fc.attributes.PRECIP_PROB);
        var PRECIP_RATE = parseInt(fc.attributes.PRECIP_RATE);
        var CLOUD_COVER = fc.attributes.CLOUD_COVER;
        var timestamp = fc.attributes.FORECAST_HOUR;
        var status = fc.attributes.STATUS;
        utcOffset = fc.attributes.UTC_OFFSET;

        //var dateString = moment.unix(timestamp).format('ddd, MMM Do, h:mm a');
        dateString = moment(parseInt(timestamp)).format("MMM Do YYYY, HH:mm");


        if (status < 1) {
            content += 'No County Data Available.'

            //Build County Forecast Table with Data.

        } else {
            content += '<tr>';
            content += '<td><b>' + dateString + '</b></td>';
            content += '<td>' + ROAD_TEMP + '&deg;F</td>';
            content += '<td>' + ROAD_FROST_PROB + '</td>';
            content += '<td>' + BRIDGE_TEMP + '&deg;F</td>';
            content += '<td>' + BRIDGE_FROST + '</td>';
            content += '<td>' + AIR_TEMP + '&deg;F</td>';
            content += '<td>' + DEW_POINT + '&deg;F</td>';
            content += '<td>' + WIND_DIRECTION + '</td>';
            content += '<td>' + WIND_SPEED + '</td>';
            content += '<td>' + WIND_GUST + '</td>';
            content += '<td>' + PRECIP_TYPE + '</td>';
            content += '<td>' + PRECIP_PROB + '</td>';
            content += '<td>' + PRECIP_RATE + '</td>';
            content += '<td>' + CLOUD_COVER + '</td>';

            //end row
            content += '</tr>';
        }
    }
});
              content += '</tbody></table></div>';

function renderDataTable() {
    $('#forecast-table').DataTable({
        destroy: true,
        searching: false,
        scrollX: false,
        scrollY: "43vh",
        scrollCollapse: true,
        paging: false,
        responsive: true,
        info: false,
        autoWidth: false,
        footer: false,
        order: [0, 'asc'],
        columnDefs: [{
            targets: 0,
            orderable: true
        }],
    });
}
$(document).ready(function () {
    //$.fn.dataTable.moment('MMMM Do, HH:mm');
    $('body').on('click', '.dijitTab', function () {
        //setTimeout(1000)
        renderDataTable();
    });
});

renderDataTable();
return content;  `

To view the datatable in live action, here is the link to the application that uses it:

weatherview.iowadot.gov/

Click on a point, then click on the forecast tab. The first tab is the date and is not ordering correctly.

Thanks!
Cody

allan

Try:

 content += '<td data-order="'+timestamp+'"><b>' + dateString + '</b></td>';

Since its a static HTML table (although dynamically generated) that will trigger DataTables' orthogonal data for that column.

Allan

cbarrett

@allan that worked, thanks!