Free Training
C Language   |   CSS   |   MainFrame   |   VBScript   |   PHP   |   XML   |   C++ Tutorials   |   Ajax   |   JavaScript   |   CSS3   |   UML   |   jQuery   |   Microsoft AJAX

Sponsored Links

jQuery Tutorials

 
Home Tutorials jQuery
 

jQuery - JavaScript Sorting

 

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:


Sample Code
  1.  
  2. <table style="WIDTH: 539px HEIGHT: 253px" class="sortable">
  3.     <thead>
  4.         <tr>
  5.             <th> </th>
  6.             <th>Title</th>
  7.             <th>Author(s)</th>
  8.             <th>Publish Date</th>
  9.             <th>Price</th>
  10.         </tr>
  11.     </thead>
  12.     <tbody>
  13.         <tr>
  14.             <td>
  15.              </td>
  16.             <td>Building Websites with Joomla! 1.5 Beta 1</td>
  17.             <td>Hagen Graf</td>
  18.             <td>Feb 2007</td>
  19.             <td>$40.49</td>
  20.         </tr>
  21.         <tr>
  22.             <td> </td>
  23.             <td>Learning Mambo: A Step-by-Step Tutorial to Building Your
  24.             Website</td>
  25.             <td>Douglas Paterson</td>
  26.             <td>Dec 2006</td>
  27.             <td>$40.49</td>
  28.         </tr>
  29.     </tbody>
  30. </table>
  31.  
Copyright exforsys.com




We'd like to turn the table headers into buttons that sort by their respective columns. Let us look into ways of doing this.


Next Page: Row Grouping Tags


Read Next: jQuery - Basic Alphabetical Sorting



 

 

Comments



Post Your Comment:

Members Please Login
Your Name:*
e-mail ID:(required for notification)*
Image Verification: 
 
 Subscribe    

Sponsored Links