Create a sortable table with php and javascript

The following example shows how to create a sortable table, using php and javascript.

<style>
	#products-table {
		border: 1px solid #ccc;
		padding: 0;
		width: 300px;
	}
	
	#products-table th {
		background-color: #efefef;
		border: none;
	}
	
	#products-table td {
		border: none;
		border-bottom: 1px dotted #333;
	}
</style>

<script src="js/sorttable.js"></script>

<?php
// Create a multidimensional array
// You can load data from database
$products  = array(	array(  "Motherboard",
						"CPU",
						"RAM",
						"Hard Disk",
						"DVD",
						"SSD",
						"Case",
						"Monitor",
						"Video Card",    
						"Audio Card"
						),
				array(56,
					88,
					35,
					60,
					15,
					90,
					70,
					140,
					68,
					44)
            );
?>

<table id="products-table" class="sortable" border="1">
	<tr>
		<th style="text-align: left;">Product</th>
		<th style="text-align: right;">Price</th>
	</tr>
	<?php
		for($n=0; $n < count($products[0]); $n++)
		{
		echo "<tr>";
		echo "<td style='text-align: left;'>" .  $products[0][$n] . "</td>";
		echo "<td style='text-align: right;'>" .  "€ " .  $products[1][$n] . "</td>";
		echo "</tr>";
		}
	?>
</table>

<script>
	$('tbody').sortable();
</script>

Examples:

You can find more details and download the sorttable.js library code on this page:

http://www.kryogenix.org/code/browser/sorttable/

Animated gif created with http://gifcreator.me/