I bet most of us have developed an application where a list of products were retrieved from a database and shown in a table with their name, price and code. So we placed a cute little icon near each column's header that linked to the search page with a flag in the URL to let it know we wanted the results ordered by name or price. The search script kindly did its job, adding the ORDER BY clause, and the ordered results were shown to the user. Obviously this method works, but there is a problem: Why must we bother the server again to retrieve the same results that are now held in the browser, only in a different order? This article will show you the quickest way to order your database results, via JavaScript, with some work in PHP.
Sorting the Easy Way - The Basic Code (Page 2 of 5 )
Let's write the basic code: it will retrieve the products from the database and display them in a table.
<?php
//Connect to the database $conn=mysql_connect('localhost','root','') or die ('Sorry, no connection to database available :-(');
//Perform our query $query='SELECT * FROM test.products';
if (!$res=mysql_query($query, $conn)) { die ('Sorry, query error'); }
//We populate the $output variable with the HTML code to generate the results table $output='<table><tr style="font-weight:bold"> <td>ID</td><td>NAME</td><td>PRICE</td> <td>CODE</td><td>WEIGHT</td></tr>';
while ($a=mysql_fetch_row($res)) { //Append the table row to our $output variable $output.="<tr id='line$a[0]'><td>$a[0]</td><td>$a[1]</td><td>$a[2]</td><td>$a[3]</td><td>$a[4]</td></tr>"; }
$output.='</table>';
? >
<html> <head> </head>
<body>
<div id='content'>
<?=$output? >
</div>
</body> </html>
Ok, this snippet of code should produce this output, a table with all the products on it:
Make sure to check the while loop. We assign each TR element an ID. The row’s ID corresponds to the ID number of the product (the ID number of each product is unique, so we are sure there won't be two TRs with the same ID):
This table is then echoed into a DIV element, which I've assigned the ID "content". I can just hear your minds crying "Yes, I know where you want to go!" Not really. Ok, flip the page and let's get our hands dirty with the sorting!
JavaScript 
/ 9 
HTML5 Boilerplate Introduction
