|
jQuery - JavaScript Sorting |
|
Page 1 of 2
Learning jQuery - JavaScript Sorting
There are times, though, when we either don't want to wait for server responses when sorting, or don't have a server-side scripting language available to us. A viable alternative in this case is to perform the sorting entirely on the browser using JavaScript client-side scripting.
For example, suppose we have a table listing books, along with their authors, release dates, and prices:
-
<table style="WIDTH: 539px; HEIGHT: 253px" class="sortable">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Author(s)</th>
<th>Publish Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td> -
</td>
<td>Building Websites with Joomla! 1.5 Beta 1</td>
<td>Hagen Graf</td>
<td>Feb 2007</td>
<td>$40.49</td>
</tr>
<tr>
<td> </td>
<td>Learning Mambo: A Step-by-Step Tutorial to Building Your -
Website</td>
<td>Douglas Paterson</td>
<td>Dec 2006</td>
<td>$40.49</td>
</tr>
</tbody>
</table>
%0D%0A%3Ctable%20style%3D%22WIDTH%3A%20539px%3B%20HEIGHT%3A%20253px%22%20class%3D%22sortable%22%3E%0D%0A%20%20%20%20%3Cthead%3E%0D%0A%20%20%20%20%20%20%20%20%3Ctr%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3E%20%3C%2Fth%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3ETitle%3C%2Fth%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3EAuthor%28s%29%3C%2Fth%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3EPublish%20Date%3C%2Fth%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3EPrice%3C%2Fth%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%0D%0A%20%20%20%20%3C%2Fthead%3E%0D%0A%20%20%20%20%3Ctbody%3E%0D%0A%20%20%20%20%20%20%20%20%3Ctr%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3E%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3EBuilding%20Websites%20with%20Joomla%21%201.5%20Beta%201%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3EHagen%20Graf%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3EFeb%202007%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3E%2440.49%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%0D%0A%20%20%20%20%20%20%20%20%3Ctr%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3ELearning%20Mambo%3A%20A%20Step-by-Step%20Tutorial%20to%20Building%20Your%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20Website%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3EDouglas%20Paterson%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3EDec%202006%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3E%2440.49%3C%2Ftd%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%0D%0A%20%20%20%20%3C%2Ftbody%3E%0D%0A%3C%2Ftable%3E%0D%0A
We'd like to turn the table headers into buttons that sort by their respective columns. Let us look into ways of doing this.
|