datetime-moment with dynamic table not working

Acladeus

G'day,

I've been using DataTables successfully in a number of projects, thank you for such a useful tool. Currently I'm trying to use the datetime-moment plugin with a dynamically created table, and I just cannot get it to work

I define the moments using the date format in use:

$.fn.dataTable.moment("DD-MMM-YYYY HH:mm:ss.SSS Z");//01-Mar-2018 08:51:55.481 +11:00

However, I construct the table behind the scenes from json data, and then append the dynamic table to a placeholder div:

<div id="tableDiv" style="width:100%"></div>

$("#tableDiv").append('<table id="jobsTable" class="table table-striped dataTable-font" cellspacing="0" style="width:100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');

$("#jobsTable").DataTable({
                    "autoWidth": true,
                    "data": result.attached_data.jobs, //json object containing data
                    "columns": columns, //columns array
                    "scrollY": 400,
                    "scrollX": true,
                    "destroy": true,
                    "language": {
                        "search": "Filter results: "
                    },

                });

The data displays fine in the table, I can select rows, perform actions on the data, etc but cannot get the date columns to sort as intended.

Any pointers will be greatly appreciated!

allan

As long as you call the $.fn.dataTable.moment method before the DataTable is initialised and you don't specify columns.type in your columns array, it should work.

Can you link to a page showing the issue please.

Allan

Acladeus

Thanks for the response Alan.

Yip, I've declared the moments before initialising the table as you can see in my example: 120.146.27.11:8082/

There are two date columns, 'Status Date' and 'Submitted By'

Best wishes,
aclad

allan

Thanks for the link. I believe the issue is that you are using:

        $.fn.dataTable.moment("DD-MMM-YYYY HH:mm:ss.SSS Z");
        $.fn.dataTable.moment("DD-MMM-YYYY HH:mm:ss Z");

But the format of the dates in the columns is not consistent. For example Status Date has:

• 16-Sep-2014 +00:00
• 04-Oct-2017 07:02:38.604 +11:00

That first one is going to cause issues because it isn't in the format being specified. All of the formatted dates in a column need to match one of the formats specified.

Allan

Acladeus

I've changed those records into one of the existing formats, unfortunately that did not help

allan

You've got a mix of the two different formats in the columns. At the moment the plug-in only supports a single format in each column. If could probably be modified if you needed to support two or more formats in a single column.

Allan

Acladeus

Ah that would explain it, my misinterpretation of the available functionality!

Supporting multiple formats in a single column would come in handy

thanks, aclad

Acladeus

In this instance, discarding the datetime-moment plugin and just defining the column type as date does the trick.

What's that old mantra about over engineering?

"columnDefs": [{ "type": "date", "targets": [6,7] }

aclad

allan

Actually - that won't always work! The built in date type specifically limits itself to basic ISO8601 since anything else is up to the browser (according to the ECMAScript spec). Chrome will try extremely hard to parse anything as a date, while other browser's give up much easier.

With your date format, there is a good chance it will be supported by all browsers, but keep in mind the MM-DD / DD-MM ambiguity, so you could potentially get different results based on the user's browser locale.

The next major version of DataTables is going to have the Moment plug-in for DataTables integrated for exactly this reason.

Allan

Acladeus

Thanks Allan, that is good news!