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>
<!-- Tabel body-->
<tbody>
<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>
</tbody>
<!-- Tabel footer-->
<tfoot>
</table>
<!-- Table Header -->
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>
</thead><th>Company</th>
<th>Ticker</th>
</tr>
<!-- Tabel body-->
<tbody>
<tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>
<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>
<!-- Tabel footer-->
<tfoot>
<tr>
<td>Total</td>
<td> 00.00</td>
</tr>
</tfoot><td>Total</td>
<td> 00.00</td>
</tr>
</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>
<!-- 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>
</table>
// 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><th>Company</th>
<th>Ticker</th>
</tr>
<!-- 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><td> ... </td>
<td>.... </td>
</tr>
</table>
Download this tutorial (include sorttable.js)Related contet
Table's anatomy: why tables are not so bad
I am 
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
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.
Grandioso! Semplice... senza troppi fronzoli!
Ebbravo Antò!
Grazie mille.
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
@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
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.
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..
Can this be use in blogger?
If so how?
Thanks for helping out this serious noob!
Very beatiful script.
Tank You very much.
Great. This php ajax data grid view is quite usefule. I have token it to my current project. Thanks a lot.
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?
Thanks a lot dude. Very useful script
Thank you very much for sharing!
It helped me alot!
@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
thank you verry much for this tutorial.
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).
Is there a way to set a default sort column?
in indonesian : terima kasih
in english : thank you
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?
I figured out the problem. It was a server setup issue. Works like a charm now.
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.
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!
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