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>

First off, check out the api for this library. Functions such as: datatables.net/api#fnFilter or datatables.net/api#fnSort might help. — Shawn31313
– Shawn31313, Commented Jul 18, 2013 at 20:03

Community · Accepted Answer · 2017-05-23 12:08:25Z

10

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 18, 2013 at 20:53

Adam

2,0313 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

timetofly · Accepted Answer · 2014-06-30 17:51:21Z

2

Old question, but datatables >= 1.10 now does this automatically.

answered Jun 30, 2014 at 17:51

timetofly

3,0856 gold badges39 silver badges80 bronze badges

Comments

nosegiant · Accepted Answer · 2013-07-18 20:11:12Z

0

How about this example? It uses a sorting plugin for DataTables to achieve the sorting, but it deals with the same type of sorting that you want.

answered Jul 18, 2013 at 20:11

nosegiant

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

DataTables.js Sort columns containing HTML links with integer text

Code

JSFiddle

JavaScript

HTML

3 Answers 3

Answer Based On

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code

JSFiddle

JavaScript

HTML

3 Answers 3

Answer Based On

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related