在 jQuery DataTables 中使用锚标记对列进行排序

Posted 2023-05-09

【中文标题】在 jQuery DataTables 中使用锚标记对列进行排序

【英文标题】：Sorting column with anchor tags in jQuery DataTables

【发布时间】：2010-12-26 08:24:18

【问题描述】：

我使用 jQuery 数据表插件对表格数据进行排序。如果列包含简单文本，则排序工作正常。如果我在文本上放置任何锚标记条件，则列排序不会正确排序。

我以下列方式显示这些值：

<td><?php if ($allAptArr[$d][27]['staffinactive'] == 1)  ?>
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
    <?php  else  ?>
        <a href='#' onClick="redirectToStaff('<?=$allAptArr[$d][10]['staff_id']?>');">
        <?=ucwords(stripslashes($allAptArr[$d][5]['staff_name']));?>
        </a>
<?php  ?> </td>

使用此代码，列排序失败。

【问题讨论】：

相关***.com/questions/1898621/…

我有同样的问题***.com/questions/41836619/…

【参考方案1】：

在准备函数之前添加：

    //sets up numeric sorting of links
    jQuery.fn.dataTableExt.oSort['num-html-asc'] = function(a,b) 
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(y) ) ? -1 : ((x > y || isNaN(x)) ? 1 : 0));
    ;

    jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) 
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y || isNaN(x)) ? 1 : ((x > y || isNaN(y) ) ? -1 : 0));
    ;

在就绪函数中：

        "aoColumns": [
           "sType": "num-html" ,
          null,
          etc. etc.
        ]

这就是我对锚的工作方式，整数按应有的顺序排列。

【参考方案2】：

将列类型设置为“html”：

$('#example').dataTable( 
    "aoColumns": [ 
         "sType": "html" ,
        null,
        null,
        null,
        null
    ]
 );

这将在排序前去除 HTML 标签。

见documentation for sType parameter

【参考方案3】：

我只是在涉及链接时使用数据表进行排序时遇到问题 - 我有一列在某些单元格中有链接，而在其他单元格中没有链接。它似乎是在排序，但它是先排序所有链接，然后再排序所有非链接，而不是同时将链接和非链接排序。问题原来是标记中的间距。当我去掉任何 a 标签周围的所有非必要间距时，我的列排序完美。

【参考方案4】：

答案已经很晚了，但对其他读者仍然有帮助，您可以采取一个虚拟专栏。还隐藏该虚拟列并按虚拟列对实际列进行排序。假设我有三列，然后将第四列添加为 dummy 并将其放入数据表调用中

$('#example').dataTable( "aoColumns": [null, null, "iDataSort":3 ,  "bVisible": false]);

【讨论】：

正是我想要的。谢谢！

【参考方案5】：

我使用DataTables HTML5 data attributes 来获取包装在锚标记中的可排序日期的所需功能。

这是许多表格单元格之一的 HTML sn-p：

<td data-order="20180115"><a href="#">01/15/2018</a></td>

【参考方案6】：

我认为这是因为您没有将锚点与同一列中的锚点数据混合。您也不应该使用 onClick，特别是与 jquery 一起使用，只需使用正确的选择器设置一个 click() 函数。

【参考方案7】：

正如他们所说，并非您放入 tds 的所有内容都是可排序的。例如，需要专门禁用链接。下面的代码 sn-p 将禁用表格中第一列的排序。

<script type="text/javascript">
$(document).ready(function ()

    $('#example').dataTable(
            "aoColumnDefs":["bSortable": false, "aTargets": [0]]);
);
</script>

【参考方案8】：

我的数据表有 2 列，第一列有 <a> 元素，我试图对我的第一列进行排序，但排序不起作用。我尝试了很多方法，但没有奏效，所以我添加了一个带有 @Html.Raw 的隐藏列，它绑定到我绑定到 <a> 的同一模型属性，并在我的隐藏列上排序。请看下面的链接

Jquery/JavaScript : Sort a datatable on column that has <a>