DotNetStories
Sorting the columns of an HTML table using JQuery
In this post I will show you how easy is to sort the columns of an HTML table. I will use an external library,called Tablesorter which makes life so much easier for developers.
Τhere are other posts in my blog regarding JQuery.You can find them all here. You can find another post regarding HTML tables and JQuery here.
We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions.
1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application.
2) Add a web form, default.aspx page to the application.
3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page
4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.
Then we need to download the Tablesorter JQuery plugin. Please donwload it, here.
5) We need to reference the JQuery library and the external JQuery Plugin. In the head section Ι add the following lines.
<script src="jquery-1_8_2_min.js" type="text/javascript"></script><script src="jquery.tablesorter.js" type="text/javascript"></script>
6) We need to type the HTML markup, the HTML table and its columns
<body>
<form id="form1" runat="server">
<div>
<h1>Liverpool Legends</h1>
<table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10" class="liverpool">
<thead>
<tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>
</thead>
<tbody>
<tr>
<td>Alan Hansen</td>
<td>Graeme Souness</td>
<td>Ian Rush</td>
</tr>
<tr>
<td>Alan Kennedy</td>
<td>Steven Gerrard</td>
<td>Michael Owen</td>
</tr>
<tr>
<td>Jamie Garragher</td>
<td>Kenny Dalglish</td>
<td>Robbie Fowler</td>
</tr>
<tr>
<td>Rob Jones</td>
<td>Xabi Alonso</td>
<td>Dirk Kuyt</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
7) Inside the head section we also write the simple JQuery code.
<script type="text/javascript">
$(document).ready(function() {
$('.liverpool').tablesorter();
});
</script>
8) Run your application.This is how the HTML table looks before the table is sorted on the basis of the selected column.
9) Now I will click on the Midfielders header.Have a look at the picture below
Tablesorter is an excellent JQuery plugin that makes sorting HTML tables a piece of cake.
Hope it helps!!!