MVC: Custom sorting for HTML table

  • Thread starter Thread starter Tommy Holm Jakobsen
  • Start date Start date
T

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?
 
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)
 
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 said:
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?
Click to expand...
Click to expand...
Thank you. I've found a way to do it client side using Javascript.

- Tommy
 
Back
Top