javascript - Jquery/JavaScript : Sort a datatable on column that has

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]

根据达米安的建议，我添加了下面的代码。我注意到，在一小部分时间里，我可以看到值已排序，但数据表没有保留顺序，它令人耳目一新，就好像我们正在重新加载页面一样。

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

[更新2]

感谢达米安。我在下面用过。现在我的数据表已排序但出现 JavaScript 错误。正在研究它。

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

解决方案

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

Answer 1

您有两个选择:

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

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

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

这里是the official documentation关于这一点。