DataTables.js对包含带有整数文本的HTML链接的列进行排序

Question

我正在尝试对DataTables.js中包含HTML锚标记的列进行排序。 anchor标记中的文本是整数，如<a href="#">123</a>。我想用数字对列进行排序。

在文档示例中，有DataTables HTML sorting auto-detection example。我试过这个，但它没有解决我的问题 - 它正确解析HTML中的文本，但是，它将结果文本视为字符串而不是整数。

示例输出：

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

期望的输出：

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

如何在排序之前将<a>文本解析为整数？

代码

的jsfiddle

这是没有上述更新的原始JSFiddle： 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

这是一个解决方案： 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" }
    ]
});

基于

的答案

• 文档： Sorting without automatic type detection
• StackOverflow： This Answer

Answer 2

旧问题，但数据表＆gt; = 1.10现在自动执行此操作。

Answer 3

this示例怎么样？它使用DataTables的排序插件来实现排序，但它处理您想要的相同类型的排序。