DataTables.js Sort columns containing HTML links with integer text

datatables, javascript, jquery, jquery-plugins

Solution

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

Problem

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> ```

Original source

Related problems