Datatables 1.10.15 broke date sorting

jojoshua · July 2017

We have been running datatables for years. Most recently we went from 1.10.12 to 1.10.15 and have noticed the dates are not sorting correctly anymore using IE11. I have tracked the problem down in jquery.dataTables.js.

The date format is from a .NET DateTime datatype and is rendered something like this. 9/8/2016 4:33:11 PM. We are sorting by this date column descending and this is the way things are sorted among these versions.

1.10.12
7/18/2017 9:14:45 AM
9/8/2016 4:33:11 PM

1.10.15
9/8/2016 4:33:11 PM
7/18/2017 9:14:45 AM

Line 14571 in jquery.dataTables.js is the issue

if ( d && !(d instanceof Date) && ( ! _re_date_start.test(d) || ! _re_date_end.test(d) ) ) {

changed to

```js
if ( d && !(d instanceof Date) && ! _re_date.test(d) ) {

The regex went from

var _re_date_start = /^[\w\+\-]/;
var _re_date_end = /[\w\+\-]$/;

to

var _re_date = /^\d{2,4}[\.\/\-]\d{1,2}[\.\/\-]\d{1,2}([T ]{1}\d{1,2}[:\.]\d{2}([\.:]\d{2})?)?$/;

Reverting these back to 1.10.12 code fixes the problem. This may be an IE11 only problem, I don't know but I would like a better solution if possible.

Thanks.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · July 2017

Hi,

This was the commit that changed that. DataTables only supports ISO8601 style date strings out of the box because anything else is completely unreliable across browsers. For example Chrome will return a number value for Date.parse('x') so we can't use that to detect if the browser thinks the string is a valid date or not.

ISO8601 is the only one in the EMCAScript standard that Date.parse must support, so that's the only one that DataTables can reliably support out of the box.

I wrote a plug-in a while back, which is introduced in this blog post and details some of the issues with date parsing in Javascript and why that plug-in is needed. It will most likely be part of DataTables core in future.

Allan

Gunjan · August 2017

Did you find out a solution without using another plugin?
Here is a jsFiddle with the same problem that you are mentioning.
https://jsfiddle.net/gv4noyrk/3/

allan · August 2017

That date format isn't ISO8601, so you would need to use a plug-in as I mentioned in my previous reply in this thread. The Moment plug-in in the linked blog post is the most versatile option, but there are lighter weight options if you need them.

Allan

Gunjan · August 2017

Allan -
Thanks for replying. I've updated our code to use the plugin.
Thanks,
Gunjan

nobilzk · September 2019

jquery.min.js version : 3.2.1
jquery.dataTables.min.js version : 1.10.15
moment.min.js version : 2.18.1
datetime-moment.js version : 1.10.12

The Date Field sorting in asc and desc order not working in dataTables version : 1.10.15

==============================================================

Solution

i reverted the jquery.dataTables.min.js to version 1.10.12 using the below script

and applied the following Fix, and its WORKING correctly.
------------------
$('.DataTable').DataTable({
...................
....................
'columnDefs': [{
target: 0, //index of column
type: 'datetime-moment'
}],
........................
........................
});

and HOW CAN I FIX in jquery.dataTables.min.js , version 1.10.15 ( I don't want to downgrade to a previous version in Current Project ?

Any SOLUTIONS ?

colin · September 2019

Hi @nobilzk ,

Both versions are old, the current is 1.10.18/1.10.19 (the same release, two versions for it!). It would be worth trying that, and if an issue, follow the links in Allan's posts above which discuss how to convert dates.

If still no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren · September 2019

@nobilzk , for proper date time sorting you will need to follow the steps in this blog:
https://datatables.net/blog/2014-12-18

Kevin

nobilzk · September 2019

@kthorngren
@colin

i am following the blog ( https://datatables.net/blog/2014-12-18) Steps and you mean to say that i have to put the - Completed plug-in - code in the steps, in my javascript code above $(document).ready(function()

OR

you mean to say that , i can use $.fn.dataTable.moment( 'HH:mm MMM D, YY' ); in my Document.Ready() function.

But include the CDN
1. //cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js
2. //cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js

I am new to DataTables , so little confused. and the examples with me are in initial development phase.

Can you Guide me a little. The solution for dataTable 1.10.12 is working . But currently i am using DataTable 1.10.15 for which its not working. So i downgraded to 1.10.12 and checked and its working.

My moment.min.js version : 2.18.1, should i change this ?

kthorngren · September 2019

Here is an example you can look at:
http://live.datatables.net/nizanuzo/3/edit

Its from this thread discussing the same issue with upgrading Datatables. The moment format might not match what you need. Refer to the Moment docs for the formatting options.

Kevin

colin · September 2019

@nobilzk , if Kevin's example doesn't help, please modify it to demonstrate the problem so we've got something to work with.

nobilzk · September 2019

@kthorngren
@colin

Hi Kevin,
I put/modified my configuration of plugin and dateformat in the below

                            http://live.datatables.net/nizanuzo/3/edit

and its working fine. with date in my format sorting properly when i modified the above.

But same i applied in my project, Its not sorting.

I already have a CSS configured in my system. So is the CSS file jquery.dataTables.min.css really important for the sorting to take place. I included this also and still its not working.

colin · September 2019

Yep, the CSS wouldn't affect this. Have you included the Moment.js source in your project. As you've shown it's working in the test case, there isn't much we can do unless we can see it failing.

nobilzk · September 2019

06/21/2019-05:09:18---in-HTML-i-modified-and-replaced">06/21/2019-05:09:18---in-HTML-i-modified-and-replaced" href="#-Date-Format->06/21/2019-05:09:18---in-HTML-i-modified-and-replaced"> Date Format >06/21/2019 05:09:18 in HTML i modified and replaced

<!-- Data table Scripts-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js?" type="text/javascript"></script>
    
    <!-- Reference to handle dates: https://datatables.net/blog/2014-12-18-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js" type="text/javascript"></script>

=================================================================

JAVASCRIPT

    $(document).ready(function () {

      $.fn.dataTable.moment('M/D/YYYY HH:mm:ss');
           
    $('#tblDataTable').DataTable({
        paging: false,
        columnDefs: [{
            target: 0, //index of column
            //type: 'datetime-moment'
        }]
    });

});

=================================================================

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin · September 2019

That Moment declaration is different to the one in the test case - there you had,

    $.fn.dataTable.moment('M/D/YYYY h:mm a');

Could that be issue?

nobilzk · September 2019

jquery.min.js (3.2.1)
jquery.dataTables.min.js (1.10.15)

nobilzk · September 2019

@colin
@kthorngren

the Test Case format for moment declaration was failing as my date format is in the format "06/21/2019 05:09:18" and no AM or PM was there. It was initially failing the test and not sorting. so i changed to below format as below and it was working in TestCase you send.

$.fn.dataTable.moment('M/D/YYYY HH:mm:ss');

Is the CSS file , jquery.dataTables.min.css necessary for the plugin to work. It conflicts with the CSS file in my project.

Can i send my code ( **2 files **, 1 js file,1 jsp file) so may me you can review the code and find the issue with my codebase. How do i send ?

colin · September 2019

The best way to progress this would be to modify Kevin's earlier test case to demonstrate the issue - that was we can see it behave in the same way as you.

allan · September 2019

Is the CSS file , jquery.dataTables.min.css necessary for the plugin to work

The CSS should in no way effect sorting. It certainly isn't required for the moment date time sorting plug-in to work.

Allan

Datatables 1.10.15 broke date sorting

Datatables 1.10.15 broke date sorting

Replies

Solution

06/21/2019-05:09:18---in-HTML-i-modified-and-replaced">06/21/2019-05:09:18---in-HTML-i-modified-and-replaced" href="#-Date-Format->06/21/2019-05:09:18---in-HTML-i-modified-and-replaced"> Date Format >06/21/2019 05:09:18 in HTML i modified and replaced

Howdy, Stranger!

Categories

DataTables

Datatables 1.10.15 broke date sorting

Datatables 1.10.15 broke date sorting

Replies

Solution

06/21/2019-05:09:18---in-HTML-i-modified-and-replaced">06/21/2019-05:09:18---in-HTML-i-modified-and-replaced" href="#-Date-Format->06/21/2019-05:09:18---in-HTML-i-modified-and-replaced"> Date Format >06/21/2019 05:09:18 in HTML i modified and replaced

Howdy, Stranger!

Quick Links

Categories

DataTables