Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

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!!!

Comments

markvt said:

If you need a more extended version of this you could look at datatables (www.datatables.net) which is also a jquery plugin. But it needs proper thead and tbody tags ,which you'd have to hack into the code since asp.net does not render these.

# September 24, 2012 4:48 PM

sIRAJ said:

IT NOT WORK WITH PAGING

Like 100 row and 1st page 20 row

when use table tablesorter it only do rows which render on page mean 20 row

# September 25, 2012 10:33 AM

salttechno said:

Simple yet interesting. Will try it out..

# September 26, 2012 1:19 AM

diluTe said:

how do i sort a table on click of columns in ASP.NET MVC 2 without plugins?

# November 21, 2012 3:52 AM

Website Designers in Kerala said:

Thanks for sharing, your job is great.

# April 15, 2013 4:07 AM