4

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

在文档示例中，有DataTables HTML 排序自动检测示例。我试过了，但它并没有解决我的问题——它确实正确地将文本从 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>
4

3 回答 3

10

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

答案基于

于 2013-07-18T20:53:05.803 回答
2

老问题，但 datatables >= 1.10 现在自动执行此操作。

于 2014-06-30T17:51:21.020 回答
0

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

于 2013-07-18T20:11:12.463 回答