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
– mason, Commented Oct 13, 2017 at 20:55
You can use DataTables datatables.net. Default configuration supports filtering and sorting. It's client side but works great. — jon.r
– jon.r, Commented Oct 13, 2017 at 20:56
@Waragi He's using Bootstrap judging by the classes. FooTable works a lot better than DataTables with Bootstrap. — mason
– mason, Commented Oct 13, 2017 at 20:57

Mathieu VIALES · Accepted Answer · 2017-10-13 21:35:32Z

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, 2017 at 21:35

answered Oct 13, 2017 at 21:02

Mathieu VIALES

4,8023 gold badges34 silver badges50 bronze badges

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

8 Comments

Lenrice Sujae Over a year ago

I'm not seeing it sorting

Mathieu VIALES Over a year ago

Can you describe the behaviour you expect when u say "sorting" ? What output do you want ?

Lenrice Sujae Over a year ago

say the user clicks the table header quantity then it sorts where ascending or descending or any of the headers.

Mathieu VIALES Over a year ago

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 :-)

Soenhay Over a year ago

It can work without a plugin but it will be more effort to get it to work.

|

Soenhay · Accepted Answer · 2017-10-13 21:23:19Z

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:

Collectives™ on Stack Overflow

Sort Table in asp.net mvc

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related