jquerydatatablesdate-sorting

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 (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.


Solution

  • There were font tags that were also being used. After removing them, everything works as it should.