Home arrow HTML arrow Page 2 - Sorting for Database Forms with HTML
HTML

Sorting for Database Forms with HTML


Welcome to the sixth part of a fourteen part series detailing how to create database forms in HTML. In this article, we will discuss sorting and its various functions as well as the boolean values that come as a result. Please join us as we tackle these issues.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
August 13, 2008
TABLE OF CONTENTS:
  1. · Sorting for Database Forms with HTML
  2. · The sort() Function continued
  3. · The getColumnIndex() Function
  4. · The titleBoolArr Array

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Sorting for Database Forms with HTML - The sort() Function continued
(Page 2 of 4 )

Do not get confused between the sort() function and the quickSort() function. The quickSort() function actually does the sorting. The sort() function calls the quickSort() function.

The sort() function first issues a prompt dialog box. The user types in the title of the column based on what sorting will take place. When the prompt dialog box is issued, the program stops and can only continue when the OK or Cancel button of the prompt box is clicked. The prompt box returns the title that the user typed in. The line of code that is responsible for all this is:


var title = prompt("Enter the Title of the Column for Sorting", "Name");


“Name” is the title of a column. I expect that the user will usually want to sort the recordset by Name. That is why you have the word “Name” in the above line of code. So the word “Name” will appear already typed for the user in the prompt dialog box.

If the Cancel button is clicked, the prompt function returns “null.” If you delete what is in the box and click its OK button, an empty string (“”) will be returned. Under these two conditions, the quickSort() function will not be called. Otherwise, the sort() function gets the column index using the title returned by the prompt function. The line for this is:


var titleInx = getColumnIndex(title); //the column index of the recordset


Just as the recordset rows have indices beginning with zero, the columns also have indices beginning with zero. I will give you the details of the getColumnIndex() function shortly. If the function sees the index of the column, it will return it. If it doesn’t see the index, it returns the number 6, which is the total number columns made visible to the user. Remember that the last (seventh) row of the recordset has either the number –1 or an index value of the transmitted table. The values of this last column are not shown to the user. If the index is seen, a number from 0 to 5 will be returned.

If the function does not see the index, it means that whatever the user typed into the prompt box is incorrect; the sort() function then alerts the user of this and returns after you click the OK button of the alert box. Note that whenever a function returns, all the lines of code below the return statement in the function are not executed. If the column (title) exists, the quickSort() function is called.

The quickSort() function receives the first row index (0) of the recordset, the last row index (numberOfRows - 1) of the recordset, and the column index (titleInx) as parameters. The sorting takes place based on a column (titleInx) for a column in the recordset. The quickSort() function does not return any value; it rearranges the rows of the recordset in ascending order based on a column.

The sort() function then displays the contents of the first row in the input controls of the form. Lastly, the sort() function calls the setTitleBool(title) function, which indicates in the titleBoolArr array that the particular column is sorted. We shall see the details of this shortly.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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