MVC: Custom sorting for HTML table

[Tommy Holm Jakobsen]

Hi,

I was wondering how I can sort a HTML table the smartest way. I've got
the following table:

<table id="customersTable" class="dataTable">
<thead>
<tr>
<th>Kundenavn</th>
<th>POB kunde nr.</th>
<th>SAP kontrakt nr.</th>
<th>Start dato</th>
<th>Brugere</th>
</tr>
</thead>
<tbody>
<% foreach (var c in ViewData["Customers"] as List<Customer>)
{ %>
<tr>
<td><%= Html.ActionLink(c.Name, c.ID.ToString(),
"Customers") %></td>
<td class="alignRight"><%= c.POBNo %></td>
<td class="alignRight"><%= c.SAPContractNo %></td>
<td class="alignRight"><%=
c.StartDate.ToString("dd-MM-yy") %></td>
<td class="alignRight"><%= c.Users.Count %></td>
</tr>
<% } %>
</tbody>
</table>

Where each header cell should be clickable to sort the choosen column.

The table datasource is a List<Customer>, published using LINQ to SQL.
Heres the controller:

AdvoforumDataContext advoforum = new AdvoforumDataContext();
List<Customer> customers = advoforum.GetCustomers();
ViewData["Customers"] = customers;
return View();

Could you give me a hint how to do this the "best" way?

 

[bruce barker]

you have two options. sort client side using javascript (which is how i'd do
it), or add an anchor on the column heads and sort server side:

<th><a href="list/sort/1">Kundenavn</a></th>
<th><a href="list/sort/2">POB kunde nr.</a></th>

where you add a sort method to the list controller.

-- bruce (sqlwork.com)

 

[Tommy Holm Jakobsen]

you have two options. sort client side using javascript (which is how i'd do
it), or add an anchor on the column heads and sort server side:

<th><a href="list/sort/1">Kundenavn</a></th>
<th><a href="list/sort/2">POB kunde nr.</a></th>

where you add a sort method to the list controller.

-- bruce (sqlwork.com)

Hi,

I was wondering how I can sort a HTML table the smartest way. I've got
the following table:

<table id="customersTable" class="dataTable">
<thead>
<tr>
<th>Kundenavn</th>
<th>POB kunde nr.</th>
<th>SAP kontrakt nr.</th>
<th>Start dato</th>
<th>Brugere</th>
</tr>
</thead>
<tbody>
<% foreach (var c in ViewData["Customers"] as List<Customer>)
{ %>
<tr>
<td><%= Html.ActionLink(c.Name, c.ID.ToString(),
"Customers") %></td>
<td class="alignRight"><%= c.POBNo %></td>
<td class="alignRight"><%= c.SAPContractNo %></td>
<td class="alignRight"><%=
c.StartDate.ToString("dd-MM-yy") %></td>
<td class="alignRight"><%= c.Users.Count %></td>
</tr>
<% } %>
</tbody>
</table>

Where each header cell should be clickable to sort the choosen column.

The table datasource is a List<Customer>, published using LINQ to SQL.
Heres the controller:

AdvoforumDataContext advoforum = new AdvoforumDataContext();
List<Customer> customers = advoforum.GetCustomers();
ViewData["Customers"] = customers;
return View();

Could you give me a hint how to do this the "best" way?

Thank you. I've found a way to do it client side using Javascript.

- Tommy