Question

我使用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>

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

Answer 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.
        ]

对于我来说这是锚定的方式，整数按照它们的顺序排列。

Answer 2

将列类型设置为'html'：

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

这将在排序前删除HTML标记。

请参阅documentation for sType parameter

Answer 3

当涉及链接时，我遇到了使用数据表进行排序的问题 - 我有一个列在某些单元格中有链接，而在其他单元格中没有链接。它似乎是排序，但它是排序所有链接，然后是所有非链接，而不是将链接和非链接排序在一起。问题结果是标记中的间距。当我拿走任何标签周围的所有非基本间距时，我的列完全排序。

Answer 4

答案已经很晚了，但对其他读者来说仍然有用，你可以选择一个虚拟列。同样隐藏虚拟列并按虚拟列对实际列进行排序。假设我有三列，然后将第四个coulmn添加为dummy并将其放入数据表调用

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

Answer 5

我认为这是因为你在同一列中混合不锚定锚数据。你也不应该使用onClick，特别是使用jquery，只需使用正确的选择器设置click（）函数。

Answer 6

正如这些家伙所说，并非你在tds中放入的所有内容都是可排序的。例如，需要专门禁用链接。下面的代码段将禁用表格中第一列的排序。

<script type="text/javascript">
$(document).ready(function ()
{
    $('#example').dataTable({
            "aoColumnDefs":[{"bSortable": false, "aTargets": [0]}]});
});
</script>

Answer 7

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

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

Answer 8

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

以下是许多表格单元格之一的HTML代码段：

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

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

8 个答案: