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

Question

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

https://stackoverflow.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 为我指出正确的方向。我通过添加一个隐藏列并使用该列进行排序来解决。请参阅上面的解决方案

Answer 1

你有两个选择：

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

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

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

这里是the official documentation 。