Sort Table in asp.net mvc

Question

How can I sort/filter a table using asp.net? I'm not sure exactly how to go about it, do I have to use jquery. Researching but i'm not seeing exactly how to handle this.

   <table>
        <tr>
            <th class="col-lg-3 tablehead">Expense Account</th>
            <th class="col-lg-3 tablehead">Description</th>
            <th class="col-lg-3 tablehead">Requisition Number</th>
            <th class="col-lg-3 tablehead">Item Number</th>

        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {

            <tr>
                <td>@Html.CheckBoxFor(m => m[i].postTrnx)</td>
               @* <td class="label">@Html.DisplayFor(m => m[i].requisitionNumber) </td>*@
                @*<td class="label">@Html.DisplayFor(m => m[i].transactionDate)</td>*@


            </tr>
            foreach (var item in Model[i].items)
            {
                @Html.HiddenFor(m => item.description)
                @Html.HiddenFor(m => item.expense_account)
                @Html.HiddenFor(m => item.itemNumber)
                <tr>
                    <td class="col-lg-3 tabledata">@item.expense_account.account_desc</td>
                    <td class="col-lg-3 tabledata">@item.description</td>
                    <td class="label">@Html.DisplayFor(m => m[i].requisitionNumber) </td>
                    <td class="col-lg-3 tabledata">@item.itemNumber</td>
                    <td class="col-sm-1 tabledata">@item.quantity</td>
                    <td class="col-sm-1 tabledata">@item.selecteduomtext </td>
                    <td class="col-sm-1 tabledata">@item.price</td>
                    <td class="col-sm-1 tabledata">@item.extended_cost</td>
                    <td class="label">@Html.DisplayFor(m => m[i].transactionDate)</td>
                    <td>@Html.ActionLink("Edit", "Edit", new { id = @item.lineNum, name = Model[i].docNumber })</td>
                </tr>

}
            }

    </table>

Do you want a default sort when the page loads? Or do you want the user to be able to dynamically sort after the page loads? Or both? — mason, Oct 13 '17 at 20:55
You can use DataTables https://datatables.net/. Default configuration supports filtering and sorting. It's client side but works great. — jon.r, Oct 13 '17 at 20:56
@Waragi He's using Bootstrap judging by the classes. [FooTable](http://fooplugins.github.io/FooTable/) works a lot better than DataTables with Bootstrap. — mason, Oct 13 '17 at 20:57
You can make it work without a plugin but you would have to code the behaviour yourself ... While some people already did it, and did it well :-) — Mathieu VIALES, Oct 13 '17 at 21:25
The answer is either write a bunch of code to do the sorting, or use a pre-made library that handles most of it for you. It's too broad of a question to show you exactly how. Most likely you should pick a specific library (do some research to find one that looks nice, easy to use, well documented and supported etc) and try to integrate it with your code. If you get stuck, that would be a more appropriate question, you would need to provide an [MCVE](http://stackoverflow.com/help/MCVe). Voting to close as too broad. — mason, Oct 14 '17 at 03:26
@mason I vote against down voting as I hit this thread on a google search and some of the suggestions above are helpful - specifically FooTable. If the post provides value to OP & other Devs that's good right? — Kearl, Jan 21 '22 at 00:54

Mathieu VIALES · Answer 1 · 2017-10-13T21:35:32.420

0

To let the user sort a html table you can use a JQuery plugin. Since I only used datatables so far I'll give you an example with that. Please see the official website for installation instructions. The usage is very easy, all you need to do is call

<script>$('table').DataTable();</script>

At the end of your html file.

Make sure to include DataTable plugin as described in the documentation.

edited Oct 13 '17 at 21:35

answered Oct 13 '17 at 21:02

Mathieu VIALES

4,526
3
31
48

I'm not seeing it sorting – Lenrice Sujae Oct 13 '17 at 21:08
Can you describe the behaviour you expect when u say "sorting" ? What output do you want ? – Mathieu VIALES Oct 13 '17 at 21:14
say the user clicks the table header quantity then it sorts where ascending or descending or any of the headers. – Lenrice Sujae Oct 13 '17 at 21:16
If what you want if to let the user sort the table himself by a click, you need to use a jQuery plugin. You can look at footable or datable documentations. I'll give you an example code tomorrow if you haven't found what you need in the official documentation :-) – Mathieu VIALES Oct 13 '17 at 21:17
It can work without a plugin but it will be more effort to get it to work. – Soenhay Oct 13 '17 at 21:24
This answer is for if you sort it before the page loads or during an ajax call. More functionality will be needed to make it work with user input. – Soenhay Oct 13 '17 at 21:29
Updated answer. I'm on phone so it isn't easy to write code examples. Try looking into the official datatables plug-in documentation and see if u can make it work. Just include the CDN links and call the datatables plug-in on your html table, it should all work out of the box :-) – Mathieu VIALES Oct 13 '17 at 21:39
Let's not answer questions that are too broad. – mason Oct 14 '17 at 03:27

score -1 · Answer 2 · answered Oct 13 '17 at 21:23

Since you want the user to be able to sort the table by clicking on a column you could use DataTables.net as others have suggested or you could do it yourself with the following general steps:

Add client side javascript click events to each column header element that you want to sort that will call the appropriate controller action.
Add server side controller action event to handle sorting the data on the server.
In the click event do an ajax partial page callback to call the server side action event.
In the controller action event Sort the data as needed.
In the client side ajax response update/load the new table element.
Track the current sort order of each column.

It is probably easier to use DataTables.net since doing it yourself might require much more research.

Some links to help:

Sort Table in asp.net mvc

2 Answers2