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 (sorting by year, then month, then day).
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?
EDIT (1): I am using JDeveloper 11G R2. This behavior occurs in both the integrated WebLogic server and stand-alone WebLogic server.
There were font tags that were also being used. After removing them, everything works as it should.