This code will provide you with the how-to on setting up Dreamweaver as well as the code inserts needed to dynamically sort and order your data on the fly. Simple and effective, and makes you look like a better webdev then you are! :)
AutoOrder and AutoSort Recordset Output
This code will provide you
with the how-to on setting up Dreamweaver as well as the code inserts needed to
dynamically sort and order your data on the fly. Simple and effective, and makes
you look like a better webdev then you are! :)
STEP 1. Database Setup
For simplicity sake, I'm very descriptive with my variables and such. So lets just imagine up a fake database right now. Let's say it's Access and it's called fignewton.mdb. Go ahead and create a connection to it through Dreamweaver, but let me just populate the DB with an imaginary table and fields.
tblNabisco
>>fldFoodID
>>fldName
>>fldPrice
>>fldDateAdded
NOTE :: This tutorial can be done on different server ends. If you create an SQL database, please note that there are some datatypes that will not work (text, ntext, etc) This being the case, make sure your primary keys are INT(4) NOT NULL, text is VARCHAR(8000) and numbers are INT(4). Oh yeah, and make dates and times SMALLDATETIME(4).
STEP 2. Think before you Stink up the joint
I always believed that it's best to fully understand what is going to come of the script before you attempt to make it happen. So in as much, let me just tell you how the script will work in the end, so you can see it happen as we build it.
The page that views your data (page.asp) will by default sort your recordset by a field we define and in an order we define. Through a small implementation of javascript, a dropdown box and 2 buttons, we can append new data onto the end of the page that will, upon reloading of the same page, create a new recordset which will be then sorted and ordered to OUR liking!
STEP 3. Let's get Creating!
Create a page called page.asp. Create a recordset, and for the heck of it, make it say Select from tblNabisco, all records. No Sort, but go ahead and make it order by fldFoodID DESCENDINGLY.
Press the ADVANCED button to get down and dirty into the SQL code.
Name : rcdAutoSort
Connection : [the name of the connection you're using]
SQL : SELECT * FROM tblNabisco ORDER BY fldFoodID DESCENDINGLY
Below, you need to press the + key twice to add 2 new blank variables. in the first, call it MM_sort, give it a default value of fldFoodID and a runtime value of Request.QueryString("srt"). In the second variable, call it MM_order, give it a default value of DESC and a runtime value of Request.QueryString("ord")
Then go up to your SQL code and rename it like this:
SELECT *
FROM tblNabisco
ORDER BY MM_sort MM_order
What happens here? Easy! If no values are given to srt or ord in the URL, it assumes the default values. Safeguards; you know I love em.
So boom, we have our dynamic recordset. Go create a table that is 4 columns by 2 rows. Place fldFoodID, fldName, fldPrice and fldDateAdded across the top, and bind the values of their respective fields to the cells below each. Then highlight the bottom row complete and use REPEAT REGION to display all resilts from rcdAutoSort
STEP 4. Javascriptastic!
Create a dropdown, and 2 buttons (give the buttons BUTTON values, not the default SUBMIT values) give the dropdown the name of sortList. Give the first button the VALUE of ASC and the name of buttonASC. And finally give the second button the VALUE of DESC and the name of buttonDESC.
In your dropdown list, populate it like such:
id | fldFoodID
name | fldName
price | fldPrice
date added | fldDateAdded
See what we did here? We paired up the name by which they sort with the respective database's table's field name. If the user wants to sort ASCendingly, they click on ASC button. Vice versa for DESC.
For the ASC Button, add the following line of code in the <INPUT> tag :
onClick="autoSort('asc')"
For the DESC Button, add the following line of code in the <INPUT> tag :
onClick="autoSort('desc')"
Last and not least, we need to add the javascript. You better know where it goes! In between the head tag, por favor:
<head>
<script language="javascript">
<!--
// aegis kleais kicks arse for makin this rockin sort order code
// i like bagels
function autoSort(order){
sorting = document.form1.sortList.value;
ourlocation = document.location.href;
stopat = ourlocation.indexOf("?");
goto = ourlocation.substring(0,stopat);
goto = goto + "?srt=" + sorting + "&ord=" + order;
document.location.href = goto;
//-->
</script>
</head>
TADA! And you're done baby!
Changing the dropdown to price and pressing DESC will bring you to the page:
page.asp?srt=fldPrice&ord=DESC. Want to change it again? Go ahead! The javascript
will clip the old variables and attach the new one! Congrats, cause you got
a dynamic order-sort system!
Comments
Great Tutorial
Brilliant tutorial
PHP / MySQL Version ?
Does anyone know if there is a PHP MySQL version of this tutorial? I need this on a PHP site I am building.
Thanks.
You must me logged in to write a comment.