Render function breaking page

parker.sorensen · June 2016

I have a column for dates in my table, and have them yyyy mm dd (ei. 2016 06 06) format, so they can sort properly. But, they are not very easy to read. I would like them to read as MM dd, yyyy (ei, June 6, 2016).

I have been trying to use the render option, but it causes my page to break, meaning the "white screen of death." It does not seem to difficult, but this one has me stumped... I think I have something basic set up incorrectly. The code I have is:

 $('#example').dataTable( {
    data: 'date',
    render: function ( data, type, row ) {
        // If display or filter data is requested, format the date
        if ( type === 'display' || type === 'filter' ) {
            var d = new Date( data * 1000 );
            return d.getDate() +'-'+ (d.getMonth()+1) +'-'+ d.getFullYear();
       }

   return data;
    }
} );

I am including this code on the events page template file. "date" is the name of the dates (it is what I put in a query to return all the dates).

Am I adding this function correctly? Any help would be greatly appreciated. Thanks

Tom (DataTables) · June 2016

You have two options

Use a rendering function as you have done. If that isn't working we would need to know what the value in Date is.
Probably a better option is to use the Ultimate Datetime Plugin. This will sort any format so you're original data can include the format you want rather than needing to use an ISO value.

Thanks

Tom

parker.sorensen · June 2016

Tom, thank you for your quick response.

The value is 'date' is being pulled from a MySQL database. I have them in the database currently as YYYY MM DD (ei 2016 09 11). But, that is different for each row in the database. I was able to, at one point, get them formatted correctly, but it pulled the first date or Jan 1, 1970 for each row.
Thanks for pointing me to the Ultimate Datetime Plugin. I have been trying to use it, but am not seeing any progress. I copied the moment.min.js and the datetime.js files into my directory, included them with a <script> tag, and used the following code on my page:
moment('<?php the_field('test_date'); ?>';
moment().format('MM DD, YYYY');
$(document).ready(function() {
$.fn.dataTable.moment( 'HH:mm MMM D, YY' );
$('#example').DataTable();
} );

Is there more that I need to do to get moment.js installed or configured? As far as I can see, I am doing what the Ultimate Datetime Plugin directs, and what they are doing. I am obviously missing something though... any thoughts?

Tom (DataTables) · June 2016

Hi Parker

If you're having issues with the Ultimate Datetime Plugin then would you be able to give me a link to the file or post a test case so I can take a look?

Thanks

Tom

parker.sorensen · June 2016

Hi Tom,
Here is a test: http://codepen.io/parkersorensen/pen/zBvQeE

It is unable to sort on this example, as I have not added the external .js files. Do you need to see a working example, or is this enough?

Thank you for your help!

Tom (DataTables) · June 2016

This is what I would expect the initialisation to look like http://codepen.io/anon/pen/beEpqJ

However the format you have given in the moment initialisation doesn't match the format of the date in the html. Therefore it's not going to match and won't sort.

If you want the date to sort correctly with the format that's in the html the format that you give to the moment plugin needs to match that.

Thanks

Tom

parker.sorensen · June 2016

That is a good point. I was wondering how that worked. I'm still a little confused as to how the html and js work together. It sounds like I need to make the moment initialisation match the html date format. How will the moment plugin know what date to display then?

I really need to date in 2 formats: (yyyy mm dd) to sort, and (MM d, yy) to display. I was assuming I would have the sorting date in the html, and use the moment plugin to display the more readable format. But, do I have this backwards? Should I have in the html the format I want displayed (ei November 12, 2016), and then use the moment plugin to sort them correctly (ei by year, then month, then day)?

Thank you so much,
Parker

allan · June 2016

How will the moment plugin know what date to display then?

This is a key point - The moment plug-in doesn't display anything. What is in the table is what is displayed (i.e. just the same as if DataTables doesn't run on the table). What the moment plug-in for DataTables is doing is making it possible to DataTables to automatically detect a specific format and then be able to sort that format.

So assuming you have control over the HTML output, that is the format that you need to tell Moment to "deformat".

Does that make sense?

Allan

parker.sorensen · June 2016

Thanks for your response, Allan.

I think it makes sense. If I understand correctly, I would make the HTML output to be the format I want to be displayed (ei. November 12, 2016). Then, I would use the moment plug-in to "deformat" the date, (which I am assuming would make it more like 20161211 (yymmdd)), so it can be sorted correctly.

Am I on the right track?

parker.sorensen · June 2016

I reformetted the HTML dates, so they are in the readable format. Then, I changed my javascript to match:
$.fn.dataTable.moment( 'MMMM DD, YYYY' );

Then, based on moment documentation, I modified this line again to include a sample date:
$.fn.dataTable.moment( "January 12, 2016","MMMM DD, YYYY" );

With that, the dates are initially sorted in the correct order! But, after the page loads, the sorting will not work (on the dates or any other column), probably due to the following javascript error:

moment.min.js:6 Uncaught TypeError: Cannot read property 'preparse' of null
jb @ moment.min.js:6
tb @ moment.min.js:6
(anonymous function) @ datetime-moment.js:36
_fnColumnTypes @ datatables.js:2258
_fnSort @ datatables.js:5915
_fnReDraw @ datatables.js:3525
_fnInitialise @ datatables.js:4720
(anonymous function) @ datatables.js:1351
each @ jquery.min.js:2
Ih.a.each @ 3592281629.js:215
each @ jquery.min.js:2
DataTable @ datatables.js:881
$.fn.DataTable @ datatables.js:15117
(anonymous function) @ (index):255
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
J @ jquery.min.js:2

I am stuck at this point. Any ideas why this error might be happening? It seems to be something with how I am accessing the moment plug-in.

I have made an updated (and simplified) version here: http://codepen.io/parkersorensen/pen/MeKPWN

Again, thank you for your much-appreciated help!

allan · June 2016

which I am assuming would make it more like 20161211 (yymmdd)

Its actually a Unix epoch timestamp in milliseconds (so an integer), but the format is irrelevant - you should never see the deformatted value.

Then, based on moment documentation, I modified this line again to include a sample date:
$.fn.dataTable.moment( "January 12, 2016","MMMM DD, YYYY" );

The issue there is that the moment documentation doesn't describe the $.fn.dataTable.moment function. The blog post that Tom linked to above does:

$.fn.dataTable.moment( format, locale )

i.e don't pass the date into the function. Just the format.

Allan

parker.sorensen · June 2016

Allan, thanks for your quick response.

If I remove the sample date
'''$.fn.dataTable.moment( "MMMM DD, YYYY" );'''
the dates will sort alphabetically, rather than by what is first. I must not be getting the Unix epoch timestamp correctly.

Thanks

allan · June 2016

$.fn.dataTable.moment( "MMMM DD, YYYY" );

That looks absolutely fine to me. I don't understand why you would remove that? Particularly if it was working.

My point was that your other line:

$.fn.dataTable.moment( "January 12, 2016","MMMM DD, YYYY" );

is not valid. Sure it is valid Javascript, but it is not what that function expects.

Allan

parker.sorensen · June 2016

Sounds good. Thank you for your help

Render function breaking page

Render function breaking page

Answers

Howdy, Stranger!

Categories

DataTables

Render function breaking page

Render function breaking page

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables