Sort column in datatable using custom html attribute with ASP.NET Core

Question

I have a table with three columns: Id, Name and Size

In MVC view I have like:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Size</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td>
                    @item.Id
                </td>
                <td>
                    @item.Name
                </td>
                <td>
                    <span data-sort="@item.SizeVal">
                        @item.Size
                    </span>
                </td>
            </tr>
        }
    </tbody>
</table>

The Size looks like: 15 MB or 1.25 GB etc.

And SizeVal from data-sort attribute is a number converted from MB, GB to Bytes.

In javascript, I initialise datatable object

var $fileTable = $(".table");

var dtable = $fileTable.DataTable({
    "columnDefs": [
        { "type": "any-number", targets: 2 }
    ],
    order: [[2, "desc"]],
    //responsive: true,
    stateSave: true,
    pageLength: 25
});

I want when sort Size column, should take in consideration value from data-sort attribute.

I tried with

"columnDefs": [
   { "type": "any-number", targets: 2 }
],

but not sort well.

How to achieve this ?

Link1 Link2

Dani
– Dani

2019-01-03 08:09:09 +00:00
Commented Jan 3, 2019 at 8:09 — Dani
– Dani, Commented Jan 3, 2019 at 8:09

Alexandre Elshobokshy · Accepted Answer · 2019-01-03 08:35:28Z

0

Datatables read the data-sort that is in the current td.

So rather than putting it in the span you need to put it in the td as shown in the HTML part here here

<td data-sort="@item.SizeVal">
    @item.Size
</td>

Please also read the documentation explaining it.

edited Jan 3, 2019 at 8:35

answered Jan 3, 2019 at 8:07

Alexandre Elshobokshy

11k6 gold badges35 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexandre Elshobokshy Over a year ago

@SnakeEyes I updated the code then to be as correct as possible.

Collectives™ on Stack Overflow

Sort column in datatable using custom html attribute with ASP.NET Core

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related