CODEWITHSUNDEEP
javascriptjqueryasp.netsortingdatatables
Ziggler
Ziggler

Reputation: 3500

Jquery/JavaScript : Sort a datatable on column that has <a>

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

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 {[email protected]})'>
                    @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

Upvotes: 0

Views: 2832

Answers (1)

Damian Galletini
Damian Galletini

Reputation: 161

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.

Upvotes: 2

Related Questions