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

Posted 2023-05-09

技术标签:

【中文标题】DataTables.js 对包含带有整数文本的 HTML 链接的列进行排序【英文标题】：DataTables.js Sort columns containing HTML links with integer text 【发布时间】：2013-07-17 22:47:29 【问题描述】：

我正在尝试对 DataTables.js 中包含 html 锚标记的列进行排序。锚标记中的文本是一个整数，例如<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>

【问题讨论】：

首先，查看这个库的 api。诸如 datatables.net/api#fnFilter 或 datatables.net/api#fnSort 之类的函数可能会有所帮助。 【参考方案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" 
    ]
);