Jquery / JavaScript：对列有< a> [英] Jquery/JavaScript : Sort a datatable on column that has <a>

问题描述

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

Jquery Datatables和asp.net MVC中的服务器端排序

我也遵循以下，但没有工作

使用jQuery DataTables中的锚点标记排序列

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

 < table class =datatable table table-bordered table-hoverborder =1> 
< thead> 
< tr> 
< th class =text-center> ID< / th> @ *这是用于排序目的* @ 
< th class =text-center> ID< / th& ; 
< th class =text-center> Name< / th> 
< / tr> 
< / thead> 
 @foreach（Model.FieldList中的var item）
 {
< tr> 
 @ *这是用于排序目的* @ 
< 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的建议，我添加了下面的代码。我可以注意到，在短短的几秒钟内，我可以看到排序的值，但datatable不保存顺序，它正在刷新，就好像我们正在重新加载页面。

 aoColumns：[{asSorting：[asc]，sType：html}，null] 
  pre> 
 
 
  [更新2]  
 
 
 
感谢Damian。我以下使用现在我的datatable被排序，但是出现JavaScript错误。 
 aoColumns：[{asSorting：[asc]，sType：html }，{null}] 
  
 解决方案 
 $ b感谢Damian指出我正确的方向。我通过添加一个隐藏列并使用该列排序来解决。请参阅上面的解决方案
解决方案
您有两个选择：
 
 
 
 1）更新到1.7以上的DataTable，因为以前的版本不支持对HTML元素进行排序。
 
 
 
 2）将sType参数添加到该列。这将忽略函数排序中的HTML，在您的情况下，如下所示：
 aoColumns：[
 {sType：html} 
]，
  
这里是关于这个的官方文档。
 
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. 

Jquery Datatables and server side sorting in asp.net MVC

I also followed below but none works

Sorting column with anchor tags in jQuery DataTables

I have a datatable like below and I am trying to sort on my first column which has an <a> element. If I remove <a> and use @Html.Raw(item.ID) it works fine but sorting does not happen when I use the <a> element.
Please let me know how can I sort a datatable on a column that has <a> element.
<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>
Thanks in advance.

[UPDATE 1]

As per Damian advice I added the code below. I can notice that for a small fraction of a second I can see the values sorted but datatable is not preserving the order and it is refreshing as if we are reloading the page.
"aoColumns": [{ "asSorting": ["asc"], "sType": "html" }, null]
[UPDATE 2]

Thanks to Damian. I used below. Now my datatable is sorted but getting JavaScript error. Looking into it.
"aoColumns": [{ "asSorting": ["asc"], "sType": "html" }, {null}]
SOLUTION

Thanks to Damian for pointing me correct direction. I solved by adding one hidden column and sorted using that column. Please see above for my solution
解决方案
You have two options:

1) Update to DataTables above 1.7, because previous versions do not support sorting on HTML elements.

2) Add the sType parameter to that column. This will ignore the HTML in the function sort, in your case, something like:
"aoColumns": [
    { "sType": "html" }
   ],
Here is the official documentation about that.

                        
这篇关于Jquery / JavaScript：对列有&lt; a&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！