Sponsored Links
jQuery Tutorials
- jQuery Table Manipulation
- jQuery Reference
- jQuery Sorting
- jQuery - JavaScript Sorting
- jQuery - Basic Alphabetical Sorting
- jQuery - The Power of Plug-ins
- jQuery - Finessing the Sort Key
- jQuery - Sorting Other Types of Data
- jQuery - Column Highlighting
- jQuery Pagination
- jQuery - JavaScript Pagination
- jQuery - Enabling the Pager Buttons
- jQuery - Marking the Current Page
- jQuery Completed sorting and paging code
- jQuery Advanced Row Striping
- jQuery Three-color Alternating Pattern
- jQuery Alternating Triplets
- jQuery Row Highlighting
- jQuery Tooltips
- jQuery Collapsing and Expanding Table Rows
Home
Tutorials
jQuery
Tutorials
jQueryjQuery - 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
- <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>
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
Sponsored Links
