fmt:formatDate JSTL tag and custom date sort using Datatables plugin

fmt:formatDate JSTL tag and custom date sort using Datatables plugin

Ok, so I have been scouring the internet for a few days now, and I'm still
stumped. I have a JSP that makes a database call, and displays the data in
a Datatables table. Now, when the date is passed to the page, it is in the
format of yyyy-MM-dd hh:mm:ss. Our users (U.S.) are accustomed to seeing
the MM/dd/yyyy format, so I use a fmt:formatDate JSTL tag to display it as
such. Unfortunately, for whatever reason, the JS does not like that tag,
and I'm not sure why.
Here is the javascript:
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-us-pre": function ( a ) {
var usDatea = a.split('/');
return (usDatea[2] + usDatea[1] + usDatea[0]) * 1;
},
"date-us-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-us-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
I have that in a file called jquery.datesort.js which I include on the
page. The following is the initialization that I use:
$(document).ready(function() {
$('#institution').dataTable( {
"sScrollY": "200px",
"iDisplayLength": 25,
"sPaginationType": "full_numbers",
"bScrollCollapse": true,
"aoColumns": [
null,
null,
null,
null,
null,
{ "sType": "date-us" },
null,
null
]
} )
} );
I know that this works, because I tested it against dummy data, where I
simply hard-coded the dates in the format of MM/dd/yyyy into the table.
The sort worked as expected when I did that.
Now here is the code for the table body:
<tbody>
<c:forEach items="${STAT.rows}" var="item">
<c:set value="${item.LOC_ID}" var="locationID"/>
<tr>
<td><c:out value="${item.NAME}" /></td>
<td><c:out value="${item.SUBSCRIPT}" /></td>
<td><c:out value="${item.ADDRESS}" /></td>
<td><c:out value="${item.RESULT}" /></td>
<td><c:out value="${item.STATUS}" /></td>
<td><fmt:formatDate pattern="MM/dd/yyyy"
value="${item.DATE}" /></td>
<td><c:out value="${item.TYPE}" /></td>
<td><c:out value="${item.RA}" /></td>
</tr>
</c:forEach>
</tbody>
This works fine to output the data into the format of MM/dd/yyyy, but for
some reason, my sort simply does not like it. When I click on the sort
buttons, they change image (up arrow to down arrow, and vice versa) to
reflect that a sort is being performed, but the data is not sorting on the
screen. Also, if I remove the fmt:formatDate tag and comment out the js
for the date sort, the date will render as yyyy-MM-dd hh:mm:ss, and will
sort that way without issue (as expected).
I am a bit puzzled, because it was my belief that the fmt:formatDate would
be taking place on the server side since it is JSTL. That would mean that
the client would only see the post-formatted data of MM/dd/yyyy, and when
the js does it's thing on the client side, it shouldn't be any different
than when I hard-coded the dates... but that is not happening.
Any ideas? Is there some kind of glaring issue that I'm missing?