Jquery/JavaScript：对具有 <a> 的列上的数据表进行排序

Posted 2023-05-09

【中文标题】Jquery/JavaScript：对具有 <a> 的列上的数据表进行排序

【英文标题】：Jquery/JavaScript : Sort a datatable on column that has <a>

【发布时间】：2017-06-09 17:59:25

【问题描述】：

这类似于下面的问题，但不完全相同，因为下面的帖子没有说明用户如何创建数据表。我搜索了很多，但找不到任何有用的资源。

https://***.com/questions/36476345/jquery-datatables-and-server-side-sorting-in-asp-net-mvc

我也跟着下面的，但是没有用

Sorting column with anchor tags in jQuery DataTables

我有一个如下所示的数据表，我正在尝试对具有<a> 元素的第一列进行排序。如果我删除 <a> 并使用 @html.Raw(item.ID) 它工作正常，但当我使用 <a> 元素时不会发生排序。 请让我知道如何对包含 <a> 元素的列上的数据表进行排序。

<table class="datatable table table-bordered table-hover" border="1">
    <thead>
        <tr>
            <th class="text-center">ID</th>@*this is for sorting purpose*@
            <th class="text-center">ID</th>
            <th class="text-center">Name</th>
        </tr>
    </thead>
    @foreach (var item in Model.FieldList)
    
        <tr>
            @*this is for sorting purpose*@
            <td class="col-md-1">
                @Html.Raw(item.ID)
            </td>
            <td class="col-md-1">
                <a href='@Url.Action("StudentDetails", "Admin", new id=@item.ID)'>
                    @Html.DisplayFor(model => item.ID)
                </a>
            </td>    
            <td class="col-md-4">
                @Html.DisplayFor(model => item.Name)                
            </td>
        </tr>
    
</table>   
<script type="text/javascript">
    $(document).ready(function () 
        $('.datatable').dataTable(
            "sPaginationType": "bs_full",
            "aaSorting": [[0, "asc"]],
            "aoColumns": [ "bVisible": false , null, null]
        );       
    );
</script>

提前致谢。

[更新 1]

根据 Damian 的建议，我添加了以下代码。我可以注意到，在一小部分时间内，我可以看到已排序的值，但数据表没有保留顺序，并且它正在刷新，就好像我们正在重新加载页面一样。

"aoColumns": [ "asSorting": ["asc"], "sType": "html" , null]

[更新 2]

感谢达米安。我在下面使用。现在我的数据表已排序但出现 JavaScript 错误。调查一下。

"aoColumns": [ "asSorting": ["asc"], "sType": "html" , null]

解决方案

感谢 Damian 为我指出正确的方向。我通过添加一个隐藏列并使用该列进行排序来解决。请参阅上面的解决方案

【问题讨论】：

我不知道为什么它被否决了。任何人都可以使用引导程序并尝试对作为该列中锚元素的列上的表进行排序。您永远无法对锚元素进行排序。这就是我们在这里试图解决的问题。在这里，我们稍微调整一下解决方案，以便我们可以在 UI 上显示我们正在按照锚元素列进行排序。我想我们需要机制让管理员知道人们只是在投票。投反对票的人必须说明他们投反对票的原因。

【参考方案1】：

你有两个选择：

1) 更新到 1.7 以上的 DataTables，因为以前的版本不支持对 HTML 元素进行排序。

2) 将 sType 参数添加到该列。这将忽略函数排序中的 HTML，在您的情况下，类似于：

"aoColumns": [
     "sType": "html" 
   ],

这里是the official documentation 。

【讨论】：

谢谢达米安。由于我有 2 列我这样给出，但它仍然没有工作。我想我做错了什么。请告诉我。 "aoColumns": [ "sType": "html" , null]

我也试过了 "aoColumns": [ "asSorting": ["asC"], "sType": "html" , null]

@Ziggler 你需要设置 "aoColumns": [ "sType": "html" , null]

感谢 Damian，上面的评论解决了这个问题。我接受这个作为答案，因为它对我有用。非常感谢，

很高兴为您提供帮助:)