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="customersTa ble" class="dataTabl e">
<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="alignRig ht"><%= c.POBNo %></td>
<td class="alignRig ht"><%= c.SAPContractNo %></td>
<td class="alignRig ht"><%=
c.StartDate.ToS tring("dd-MM-yy") %></td>
<td class="alignRig ht"><%= 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:

AdvoforumDataCo ntext advoforum = new AdvoforumDataCo ntext();
List<Customercu stomers = advoforum.GetCu stomers();
ViewData["Customers"] = customers;
return View();

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

[=?Utf-8?B?YnJ1Y2UgYmFya2Vy?=]

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" wrote:

Hi,

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

<table id="customersTa ble" class="dataTabl e">
<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="alignRig ht"><%= c.POBNo %></td>
<td class="alignRig ht"><%= c.SAPContractNo %></td>
<td class="alignRig ht"><%=
c.StartDate.ToS tring("dd-MM-yy") %></td>
<td class="alignRig ht"><%= 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:

AdvoforumDataCo ntext advoforum = new AdvoforumDataCo ntext();
List<Customercu stomers = advoforum.GetCu stomers();
ViewData["Customers"] = customers;
return View();

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

[Tommy Holm Jakobsen]

On Tue, 8 Jul 2008 09:02:10 -0700, bruce barker
<br*********@di scussions.micro soft.comwrote:

>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" wrote:

>Hi,

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

<table id="customersTa ble" class="dataTabl e">
<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="alignRig ht"><%= c.POBNo %></td>
<td class="alignRig ht"><%= c.SAPContractNo %></td>
<td class="alignRig ht"><%=
c.StartDate.To String("dd-MM-yy") %></td>
<td class="alignRig ht"><%= 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:

AdvoforumDataC ontext advoforum = new AdvoforumDataCo ntext();
List<Customerc ustomers = advoforum.GetCu stomers();
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