DataTables.js Sort columns containing HTML links with integer text

Question

I'm trying to sort columns in DataTables.js that contain HTML anchor tags. The text within the anchor tag is an integer, like <a href="#">123</a>. I want to sort the columns numerically.

In the documentation examples, there is DataTables HTML sorting auto-detection example. I tried this but it doesn't solve my issue - it does correctly parse the text out of the HTML, however, it treats the resulting text as a string and not an integer.

Example output:

0, 0, 1, 14, 67, 67, 7

Desired output:

0, 0, 1, 7, 14, 67, 67

How can I parse the <a> text as an integer prior to sorting?

Code

JSFiddle

This is original JSFiddle without above update(s): http://jsfiddle.net/adamtsiopani/V4Ymr/

JavaScript

$(document).on('ready', function() {
    $('.data-table').dataTable({
        "bPaginate": true,
        "bFilter": true,
        "bSort": true,  
        "bAutoWidth": false,
        "iDisplayLength": 100,
        "sPaginationType": "full_numbers",
        "sDom": '<"tools"T><"top"flip>rt<"bottom"lfip><"clear">',
        "oTableTools": {
            "aButtons": [
                "copy", "csv", "xls", "pdf",
                {
                    "sExtends":    "collection",
                    "sButtonText": "Save",
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        }
    });

    $.fn.dataTableExt.aTypes.push(
        function ( sData ) {
            return 'html';
        }
    );

});

HTML

<table class="data-table">
    <thead>
            <tr>
            <th scope="col">Specialty</th>
            <th scope="col">Friday<br>21/01/2011</th>
            <th scope="col">Saturday<br>22/01/2011</th>
            <th scope="col">Sunday<br>23/01/2011</th>
            <th scope="col">Monday<br>24/01/2011</th>
            <th scope="col">Tuesday<br>25/01/2011</th>
            <th scope="col">Wednesday<br>26/01/2011</th>
            <th scope="col">Thursday<br>27/01/2011</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#">ACCIDENT AND EMERGENCY</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">14</a></td>
            <td><a href="#">67</a></td>
            <td><a href="#">45</a></td>
            <td><a href="#">43</a></td>
            <td><a href="#">28</a></td>
            <td><a href="#">36</a></td>
        </tr>
        <tr>
            <td><a href="#">ANAESTHETICS</a></td>
            <td><a href="#">36</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">14</a></td>
            <td><a href="#">43</a></td>
            <td><a href="#">28</a></td>
            <td><a href="#">67</a></td>
            <td><a href="#">45</a></td>
        </tr>
        <tr>
            <td><a href="#">CARDIOLOGY</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">14</a></td>
            <td><a href="#">67</a></td>
            <td><a href="#">45</a></td>
            <td><a href="#">43</a></td>
            <td><a href="#">28</a></td>
            <td><a href="#">36</a></td>
        </tr>
        <tr>
            <td><a href="#">HEPATOLOGY</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">1</a></td>
            <td><a href="#">1</a></td>
            <td><a href="#">1</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">1</a></td>
        </tr>
        <tr>
            <td><a href="#">GASTROENTEROLOGY</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">4</a></td>
            <td><a href="#">7</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">2</a></td>
        </tr>
        <tr>
            <td><a href="#">PLASTIC SURGERY</a></td>
            <td><a href="#">6</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">8</a></td>
            <td><a href="#">16</a></td>
            <td><a href="#">5</a></td>
            <td><a href="#">4</a></td>
        </tr>
        <tr>
            <td><a href="#">UROLOGY</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">0</a></td>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
        </tr>
    </tbody>
</table>

Answer 1

Here's a solution: http://jsfiddle.net/adamtsiopani/V4Ymr/8/

jQuery.fn.dataTableExt.oSort['numeric-html-asc']  = function(a,b) {
    a = parseInt($(a).text());
    b = parseInt($(b).text());
    return ((a < b) ? -1 : ((a > b) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['numeric-html-desc']  = function(a,b) {
    a = parseInt($(a).text());
    b = parseInt($(b).text());
    return ((a < b) ? 1 : ((a > b) ?  -1 : 0));
};

$('.data-table').dataTable({
    //set the sType to the custom type provided above
    "aoColumns": [
        null,
        { "sType": "numeric-html" },
        { "sType": "numeric-html" },
        { "sType": "numeric-html" },
        { "sType": "numeric-html" },
        { "sType": "numeric-html" },
        { "sType": "numeric-html" },
        { "sType": "numeric-html" }
    ]
});

Answer Based On

• Documentation: Sorting without automatic type detection
• StackOverflow: This Answer