Sorting data made easy using JavaScript table sorter

javascript-table-sorter
If you’re asked to build a PHP script that pumps out some data from the database and presents in an HTML table to the users. And on the first row of the table, shows the titles of each field (As pictured above). Once the user clicks on each title the data in the column need to be sorted. If you implement this in a server-side scripting such as PHP, it’ll then need to send the request back to the server to get the server-side PHP script to sort the data by changing the “ORDER BY” in an SQL statement.

This sounds little complex and some more whenever the user clicks on the title simply for getting the data to sort, it’ll need to be sent back to server and wait for the server to send back the result. And it’s less efficient and slow, if users access the page over the Internet.

So the best is to implement such a sorting of data using JavaScript, where there is NO hassle of dealing with server-side scripting, and the sorting is much faster than using server-side which needs to wait for page or result sent over the Internet. I’ve found a JavaScript Table Sorter, which was developed by LIEGEBER and it’s pretty easy to use.

Using the LIEGEBER’s JavaScript Table Sorter, you just need to include a few lines, mark the tables with the appropriate CSS class names, then each column can then be sorted when the user clicks on the title of each column. Simple steps as follows:

First include the CSS stylesheet and the JS file extracted from the LIEGEBER’s JavaScript Table Sorter package, within the header tag pair of your page.

<link rel=”stylesheet” href=”style.css” />
<script type=”text/javascript” src=”script.js”></script>

Then mark the table that you need it to be sortable with the CSS class name “sortable” and DOM ID “sort”.

<table border=0 width=”100%” align=center class=”sortable” cellspacing=1 cellpadding=1 id=”sorter”>

And then mark the row of the titles with CSS class name “nosort”. This row is where user clicks on each title of the column to get the respective column sorted.

<tr class=”nosort”>
   <td align=”left”><b>ID</b></td>
   <td align=”left”><b>Name</b></td>
   <td align=”left”><b>Website</b></td>
   <td align=”left”><b>Email</b></td>
</tr>

And finally add a script tag pair at the bottom of your page to tell the JavaScript Table sorter of which table to be sorted, in this case it’s the table with the DOM ID “sorter”

<script type=”text/javascript”>
var sorter=new table.sorter(“sorter”);
sorter.init(“sorter”,1);
</script>

So the complete code of the PHP page that uses the JavaScript table sorter is as follows:

<?php

define(‘DB_USER’,'testusr’);
define(‘DB_PASS’,'testtesttesttest’);
define(‘DB_NAME’,'test_db’);
define(‘DB_HOST’, ‘localhost’);

$conn=mysql_connect (DB_HOST, DB_USER, DB_PASS) or die(mysql_error($conn));
mysql_select_db(DB_NAME);

$res=mysql_query(“SELECT * FROM cust ORDER BY name LIMIT 0,30″) or die(mysql_error());

$nrows = mysql_num_rows($res);

?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Table Sorter</title>
<link rel=”stylesheet” href=”style.css” />
<script type=”text/javascript” src=”script.js”></script>
</head>
<body>
<div id=”wrapper”>
<table border=0 width=”100%” align=center class=”sortable” cellspacing=1 cellpadding=1 id=”sorter”>
<tr class=”nosort”>
  <td align=”left”><b>ID</b></td>
  <td align=”left”><b>Name</b></td>
  <td align=”left”><b>Website</b></td>
  <td align=”left”><b>Email</b></td>
  </tr>
<?php

for ($r=0; $r< $nrows; $r++)
{
$row = mysql_fetch_row ($res);

?>
<tr>
  <td align=”left”><?php echo $row[0];?></td>
  <td align=”left”><?php echo $row[1];?></td>
  <td align=”left”><?php echo $row[2];?></td>
  <td align=”left”><?php echo $row[3];?></td>
</tr>
<?php
}
?>
</table>
</div>
<script type=”text/javascript”>
var sorter=new table.sorter(“sorter”);
sorter.init(“sorter”,1);
</script>
</body>
</html>

So it’s much easier to implement the sorting using the JavaScript table sorter than using the server-side script like PHP. And the response to the users for the sorted result is almost instance, whereas using server-side sorting will need the users to wait for the page to be sent to and fro. You can download the Leigeber’s JavaScript table sorter here

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Sorting data made easy using JavaScript table sorter”


  1. No Comments

Leave a Reply

You must login to post a comment.