Question

This is similar to the problem below but not exactly the same since the post below does not tell about how the user is creating the datatable. I googled a lot but could not find any helpful resource.

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。

Jquery / JavaScript：对具有<a>

1 个答案: