This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Friday, February 22, 2008

Sort table rows using Ajax

Simple sort script using Stuart Langridge's sortabe.js

Some days ago I was looking for a good and simple way to sort data into a table with a simple click on table headers and I found this interesting framework: Stuart Langridge's sorttable.js.

This tutorial explains how to use it in your projects:


Download this tutorial (include sorttable.js)

Step 1: include sorttable.js
Create a new page and include in the <head> tag a link to sorttable.js:

<script src="sorttable.js" type="text/javascript"></script>

Step 2: HTML code to design a sortable table
Create a new table and add "sortable" in the table class parameter:

<table class="sortable"> ... </table>

If, in the same page, you have more than one table, you can apply this class to all tables you want to sort. The general structure for each table you want to sort contains a <thead> (table header) a <tbody> (table body) and <tfooter> (table footer) like the following example:

<table class="sortable">
<!-- Table Header -->
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>

</thead>

<!-- Tabel body-->
<tbody>
<tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>

<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>
</tbody>

<!-- Tabel footer-->
<tfoot>
<tr>
<td>Total</td>
<td> 00.00</td>
</tr>
</tfoot>
</table>

When you click on a header (in this simple example "Company" or "Ticker") all rows within <tbody> tag will be sort in ascending or decreasing order.

Step 3: populate table rows with data using PHP
You can populate a table with some data using a server-side language such as PHP, Coldfusion, ASP or similar. If you use PHP you can use this simple code:

<?php
// Include connection to your database
include('dbconnection.php');
$getCompany_sql = 'SELECT * FROM COMPANY';
$getCompany= mysql_query($getCompany_sql);?>

<table class="sortable">
<!-- Table Header -->
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>

</thead>

<!-- Tabel body-->
<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['companyName'] ?></th>
<th><?php echo $row.['companyTicker'] ?></th>
</tr>

<?php } ?>
</tbody>

<!-- Tabel footer-->
<tfoot>
<tr>
<td> ... </td>
<td>.... </td>
</tr>
</tfoot>
</table>

Download this tutorial (include sorttable.js)


Related contet
Table's anatomy: why tables are not so bad

blog comments powered by Disqus
Gabi said...

I also found this solution for sorting a simple table. But didn't find anything to use in sorting the table where the entries are displayed on more than one page. If you have any idea or a link please share it!

Thank you !

Gabi

Bagi Zoltán said...

It is a very nice tutorial, as usually, but the javascript seems to have some conflict with the mootools library, so heartbreaking, but must go.

Shankar said...

Grandioso! Semplice... senza troppi fronzoli!
Ebbravo Antò!
Grazie mille.

Anonymous said...

Great code, works perfectly. I was wondering if there was a way to set a flag so that when you go to another page it stays in order, or you can see what it was sorted by. Thanks. The JS is embedded into asp

crazymerlin said...

@gabi

You could have all your data in a single table which is inside a div which only shows, say the top 10 rows. Upon next page click, slide the div up to display the next 10 rows...and use that method.

This would be a problem with huge tables, but for 100 or so rows it should be fine.

Paul

Lucas said...

Hi,

I am trying to use your code, but i am having problems.
My tables is a return of ajax, in my console dont have any error, but the sort dont work.

Anonymous said...

hi..

any idea about the limit? cause im using your code at the search area.. but the problem, what if a have a 1000 records. how can i use a limit then have a next button to show the next record.

Thanks..

THE UNH MEN'S HOCKEY BLOGGER GUY said...

Can this be use in blogger?

If so how?

Thanks for helping out this serious noob!

Anonymous said...

Very beatiful script.
Tank You very much.

Barbie said...

Great. This php ajax data grid view is quite usefule. I have token it to my current project. Thanks a lot.

Kris Chase said...

Hey! I've implemented this script but am having trouble getting it to work.

http://phpfi.com/384613

is my code,

When I click on the header column titles an arrow comes, and if I repeatedly click it the arrow points up / down, but the column isnt actually sorting.. any idea why?

Bartox said...

Thanks a lot dude. Very useful script

Anonymous said...

Thank you very much for sharing!
It helped me alot!

hamy said...

@kris,

You have the tbody being echo'ed inside of your while loop. Look at your HTML, it probably looks something like
tbody, html for one row, /tbody
tbody, html for one row, /tbody
tbody, html for one row, /tbody

etc. The script is probably sorting just the first row, not all of them. (which results in it looking like it is not sorting at all).

To fix, echo your tbody, then run your while loop, and then echo your /tbody

Good Luck,
Hamy

ramairi said...

thank you verry much for this tutorial.

Tread said...

There is an important problem with your initial table code. The <tfoot> section follows after the <thead>, according to W3C recommendations. Yes, it doesn't make sense semantically, but some browsers won't render your footer correctly (or at all).

Charles Mims said...

Is there a way to set a default sort column?

Nucreativa said...

in indonesian : terima kasih
in english : thank you

Andy Brown said...

The php code wil display my table, but it won't sort.

If I pull the table data out of the php code and put it in the sample you include, it sorts. What's up with that?

Andy Brown said...

I figured out the problem. It was a server setup issue. Works like a charm now.

Anonymous said...

Awesome script!

@Charles Mims
Yes, you set your SQL to order the way you want.

ORDER BY column_name(s) ASC|DESC

e.g.
$getCompany_sql = 'SELECT * FROM COMPANY ORDER BY companyName ASC';

@Andy Brown
You'll need to post a link or your codes in order to get some help.

Benjamin Motter said...

Thanks for the script! I'm new to Javascript, but I saw something I felt this script was missing: the ability to accurately sort rows with mixed numeric and alphabetic data. As the script is provided, data sets which include "12 Condos, 138 Offices, 4 Apartments" would be sorted exactly as printed above, instead of "4 Apartments, 12 Condos, 138 Offices" as expected.

I have made a few modifications to the script to correct this problem- they can be reviewed here.

Thanks again!

Anonymous said...

hello, i have a table with like 10o rows, i want so see all of them in the table, looks like, we can only see a few, somebody knows how to change this???

thanks you

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News