Adding Dynamic Capabilities
In this part, we are going to add code to dynamically set the number of records to display, and to add search capability.To dynamically set the number of records to display, just above the Prev and Next buttons, add the code shown below.Number of Records to Show:
<input type="text"
onchange="tblElements.dataPageSize = this.value;"><br>Note: With a database this small, this feature might get confusing because when you browse to the beginning or end of the database, it can only show the number of rows remaining, which is likely to be less than the number of records you set it to display.To add a search capability, just below the Prev and Next buttons, add the code shown below.Enter Filter Parameters:
<input type="text"
onchange="ebaydb.Filter = this.value; ebaydb.Reset();">This creates a text box where you can type in a "filter". For example, if you enter Cost = 8.50 in the text box and click on theNext button, The web page will display the record for the Action Figure because that is the only item in the database with a cost of 8.50.
If you enter Desc = Video Game in the text box and click on theNext button, the web page will display the record for the Video Game.
If you enter Item > 10002 in the text box and click on the Nextbutton, the webpage will display SOME of the records where Item is greater than 10002. We know there are 14 records in the database where Item is greater than 10002, but the webpage will only display the number of records you set it to display. To see more of the records in the database where Item is greater than 10002, you have to click the "Next" button.
If you enter Cost >= 5.00 & Cost <= 10.00 the web page will display the records where the Cost is between 5.00 and 10.00. See if you can come up with some filters on your own.
Below is the entire code, up to this point, for the Notepad Database (excluding the "comma delimited values" database itself).
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
<script language='JavaScript'>
function Prev()
{
tblElements.previousPage();
}
function Next()
{
tblElements.nextPage();
}
</script>
</head>
<body>
<object classid='clsid:333C7BC4-460F-11D0-BC04-0080C7055A83' id='ebaydb'>
<param name='DataURL' value='ebaydb.txt'>
<param name='UseHeader' value='True'>
</object>
<table id='tblElements' datasrc='#ebaydb' dataPageSize=4>
<tr>
<td><span datafld='Item'></span></td>
<td><span datafld='Desc'></span></td>
<td><span datafld='Cost'></span></td>
<td><span datafld='ShipP'></span></td>
<td><span datafld='Sale'></span></td>
<td><span datafld='ShipR'></span></td>
<td><span datafld='ShipC'></span></td>
</tr>
</table>
Number of Records to Show:
<input type='text' size=3 onchange='tblElements.dataPageSize = this.value;'><br>
<input type='button' value=' < ' onclick='Prev()'>
<input type='button' value=' > ' onclick='Next()'><br>
Enter Filter Parameters:
<input type='text' onchange='ebaydb.Filter = this.value; ebaydb.Reset();'>
</body>
</html>
Adding Column Sorting Capability
You have probably run into tables on the Web where you click on a column in the table header and the table data is sorted based on the values of the data in that table column. It's very easy to add that feature to our webpage, but first we have to add a header to our table. Below, I show the table starting tag and the code you have to add to create a header for the table. Also note that I added the attribute border=1 to the table tag.
<table border=1 id="tblElements" datasrc="#ebaydb" dataPageSize=4>
<thead>
<td><span id="Item">Item ID</span></td>
<td><span id="Desc">Description</span></td>
<td><span id="Cost">Cost</span></td>
<td><span id="ShipP">Shipping Cost</span></td>
<td><span id="Sale">Sale Price</span></td>
<td><span id="ShipR">Shipping Received</span></td>
td><span id="ShipC">Shipping Charged</span></td>
</thead>
After adding this code, open the webpage in Internet Explorer to verify that the table header appears correctly. I will give you the code to make the Cost column click sortable, from which you should easily be able to figure out the code to make the other columns sortable.
First you have to add an onclick event handler to the span with id="Cost" as shown below.
<td><span id="Cost" onClick="sortCost()">Cost</span></td>
Note that the onclick event handler calls a function named sortCost. The code for that function is shown below.
function sortCost()
{
ebaydb.Sort = "Cost";
ebaydb.Reset();
}
Add this code to the Java Script code block in the head of the webpage,
One last thing. The Cost column will not sort correctly because we didn't define it as a float in our comma delimited values (CDV) database file. This is a simple and quick modification. Just open the database file ebay.txt and edit the first line as shown below, adding the :FLOAT next to Cost. If you don't do that, the Data Source Object (DSO) defauts the field to "string".
Item,Desc,Cost:FLOAT,ShipP,Sale,ShipR,ShipC
If you intend to make all the columns click sortable, you can specify the data types of all the fields right now as shown below.
Item:INT,Desc,Cost:FLOAT,ShipP:FLOAT,Sale:FLOAT,ShipR:FLOAT,ShipC:FLOAT
Now open the webpage in Internet Explorer and enter 16 in the "Number of Records to Show" text box. Then click on the "Next" button to display all 16 records. Next click on the header over Cost. The table will be sorted by cost. Of course, you could have sorted without displaying all 16 records, but only the records visible in the table would have been sorted.
Using Images in Your Database
Lets review. To enable a databse to bind to html elements on a web page, we used the <object> tag to a Data Source Object (DSO) called the Tabular Data Control (TDC) on the webpage. In Internet Explorer 4.0 and higher, Microsoft added special attributes to html elements to make data binding possibe. The <table> tag uses the datasrc attribute to specify the DSO that the table should bind to. It uses the dataPageSize attribute to specify the maximum number of records to diaplay at once.
The Table data tag <td> uses the dataFld attribute to specify which field in a record to bind to. It uses the dataFormatAsattribute to specify how the data is to be rendered. In this article we used the default format text.
Another format is html. Just imagine how powerful this is. Your database could contain html and that html will be rendered. To say it another way - you can have webpages in your database. For example, the "text" in a field of your database could the html for a link or for an image tag. below is an example of a link or for an image tag.
<tr><td><span datafld="Image" dataformatas="html">
</span></td></tr>
Below is a screen shot of a database application based on the code used in this article. This could be used as a photograph library, an inventory with photographs, or a catalog database.
In this article, we created a database using Notepad that consists of comma delimited values (CDV). The only thing we need to use the database is Internet Explorer. We placed a Data Source Object (DSO) called the Tabular Data Control (TDC) on the webpage. In Internet Explorer 4.0 and higher, Microsoft added special attributes to html elements to make data binding possibe. We used these attributes to browse, search, and sort the database.
To make learning easier, I kept the code to bare bones. You should understand the code enough to create a database to organize your DVD collection, your checkbook, personal contacts or club members, or any other data. With a little extra html code, you should be able to make a much nicer webpage to display the database.
For your convenience I have provided all of the files for the ebay database and the image database in a zip file. Click here to download the example files.
