jQuery Datatable sorting by Date with text

I have a fairly simple jQuery datatable that consists of several columns and I have one column that contains a Subject, Due Date and brief description.

What I would like to do is sort the column only by the due date and ignore the rest. This works fine if I only have the date, but as soon as I add the addition text it no longer sorts properly.

Here is a snippet of the jQuery code:

$(document).ready(function() {

        $('#casesDataTable').dataTable(
        {
            "sPaginationType": "full_numbers",
            "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
            "iDisplayLength": 100,
            "aaSorting": [[1, "desc"]]
        });
   });

And here is a snippet of the HTML code without CSS:

<tr>
    <th id="subject" style="width:40%;">
        Subject & Due Date
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </th>

    <th id="modified" style="width:10%;">
        Last Modified
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </th>

</tr>

<td class="center subject">
    <span style="display: none;">9/26/2011</span>
        <div class="padding">
            tester 3
        </div>
        <div class="padding duedate">
        <p>9/26/2011 - Mauris nulla mauris, ornare quis accumsan vitae, consectetur non sapien. In congue dui in sem cursus eleifend. Ut non suscipit augue. Praesent euismod auctor felis, eget pharetra justo euismod a. </p>
        </div>
</td>

<td class="center sorting_1">
     2/9/2011
</td>

<td class="center subject">
    <span style="display: none;">4/30/2013</span>
        <div class="padding">
            tester 1
        </div>
        <div class="padding duedate">
            <p>4/30/2013 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque adipiscing rutrum lacinia. Donec ullamcorper ligula eu purus semper semper. Sed in est et nibh condimentum semper quis ultricies u...</p>
        </div>
</td>

<td class="center sorting_1">
    4/15/2013
</td>

    <td class="center subject">
    <span style="display: none;">5/16/2012</span>
                <div class="padding">
                    tester 2
                </div>
                <div class="padding duedate">
                <p>5/16/2012 - Nullam viverra, urna a tempus scelerisque, odio purus ultricies nibh, mollis pellentesque justo est quis augue. Quisque nec odio libero, tempus viverra leo.</p>
                </div>
    </td>

    <td class="center sorting_1">
         2/9/2012
    </td>

    <td class="center subject">
    <span style="display: none;">5/16/2010</span>
                <div class="padding">
                    tester 4
                </div>
                <div class="padding duedate">
                <p>5/16/2010 - In vulputate rutrum elit nec mattis. Integer ullamcorper vestibulum sapien adipiscing gravida. Nullam quis ante diam, vel luctus elit. Quisque id adipiscing erat. ?</p>
                </div>
    </td>

    <td class="center sorting_1">
         2/9/2010
    </td>

When I run this script and sort by "Last Modified" it works fine, but if I sort by "Subject & Due Date" it messes up, when I'm trying to get it to sort by the due date which is in a hidden span after each .

Anyone know how to accomplish this, or can see what I'm doing wrong?

I had a similar problem and found the solution the other day.

For any column, you can specify an iDataSort parameter which specifies the alternative column to sort by. You can combine this with an extra column that you just have the date in, but hide that column using bVisible = false.

See the column help at http://datatables.net/usage/columns