Home arrow JavaScript arrow Page 5 - Sorting the Easy Way

Sorting the Easy Way

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.

Author Info:
By: Alf A. Pedersen
Rating: 4 stars4 stars4 stars4 stars4 stars / 10
March 17, 2004
  1. · Sorting the Easy Way
  2. · The Basic Code
  3. · We Love INNERHTML!
  4. · See What We've Done...
  5. · PHP Sorting

print this article

Sorting the Easy Way - PHP Sorting
(Page 5 of 5 )

We've written a PHP function that will take care of sorting the PHP arrays and generating the JS arrays. Its first parameter is the name of the array (this is the parameter we pass to the JS order function), the second is the array of data to sort, and the third a flag that indicates how the function will sort the array.

The table headers are kept in a variable so we don't have to re-write them again in the JS order() function, and links are added to the left and right of each column's header that call the JS order() function with the name of the array we want to use for the sorting.

Final Words

In this article we've explored a nice example of how to sort the results of a database search in real time, giving the user a fast response which he/she will surely appreciate. It's not a lot of extra work to do, and I think it's really worth it.

By the way, I like the idea of PHP generating JS that generates HTML!Of course, there is a major problem with this trick. If the userís browser is too old and doesn't know what innerHTML is, we're in trouble. This trick should only be used if you detect that the userís browser can handle the innerHTML property. If it can't, the "older" approach I explained in the opening paragraph of the article could be used, maybe with a message to the user advising them to upgrade their browser.

This code was tested successfully on a P4 1'8 GHz 256 MB RAM with Windows 2000 Professional, Apache/1.3.27, MySQL 4.0.12, PHP 4.3.1 with the following browsers: Mozilla 1.4 and IE 6.0. It may not be 100% bug free, so I'd appreciate any feedback!

There is an online sample here.

Have fun, and happy coding!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials