Given some recent success on a simple form validation (mainly due to
the kind folks in this forum), I've tried to tackle something a bit
more difficult. I'm pulling data down from a database and populating a
simple table. I'd like the table to contain 10 entries per page and
have the option for the user to scroll through the pages of data
without having to go back to refresh the page (I've already pulled all
the info I need from the database). So, I've taken a stab at it and
this is probably not the best way to do it (so if you have a better
idea I'm open), but I think it will work. Right now I'm encountering
an 'Object Expected' error and I don't know how to interpret what it's
telling me.
Here's an isolated example of the code that I've been playing with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding: 2px;">
<div id="panel"></div>
<script type="text/javascript">
//<![CDATA[
var dataArray = new Array();
var panel = document.getEle mentById('panel ');
dataArray[0] = "<tr valign=\"top\" class=\"rowOff\ "
onMouseOver=\"t his.className=' rowOn'\"
onMouseOut=\"th is.className='r owOff'\"><td class=\"grid\"
align=\"center\ "><a class=\"inlineA ctionLink\"
href=\"detailin fo.php?MlsNum=5 31245&nomap=tru e\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableCo ntent\"
align=\"right\" >129,900</td><td class=\"tableCo ntent\"
align=\"center\ ">3</td><td class=\"tableCo ntent\"
align=\"center\ ">3</td><td class=\"tableCo ntent\"
align=\"center\ ">1,720</td></tr>";
dataArray[1] = "<tr valign=\"top\" class=\"rowOff\ "
onMouseOver=\"t his.className=' rowOn'\"
onMouseOut=\"th is.className='r owOff'\"><td class=\"grid\"
align=\"center\ "><a class=\"inlineA ctionLink\"
href=\"detailin fo.php?MlsNum=5 13195&nomap=tru e\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableCo ntent\"
align=\"right\" >124,500</td><td class=\"tableCo ntent\"
align=\"center\ ">4</td><td class=\"tableCo ntent\"
align=\"center\ ">3</td><td class=\"tableCo ntent\"
align=\"center\ ">1,528</td></tr>";
panel.innerHTML = "<table border=\"0\" cellpadding=\"2 \"
cellspacing=\"1 \" width=\"100%\" class=\"tableGr idList\"><tr><t d
class=\"colHead \" align=\"center\ "> </td><td class=\"colHead \"
align=\"center\ ">Price</td><td class=\"colHead \"
align=\"center\ ">Beds</td><td class=\"colHead \"
align=\"center\ ">Baths</td><td class=\"colHead \"
align=\"center\ ">SqFt.</td></tr>";
panel.innerHTML += dataArray[0];
panel.innerHTML +="</table>";
//]]
function changePage(inde x) {
panel.innerHTML = "<table border=\"0\" cellpadding=\"2 \"
cellspacing=\"1 \" width=\"100%\" class=\"tableGr idList\"><tr><t d
class=\"colHead \" align=\"center\ "> </td><td class=\"colHead \"
align=\"center\ ">Price</td><td class=\"colHead \"
align=\"center\ ">Beds</td><td class=\"colHead \"
align=\"center\ ">Baths</td><td class=\"colHead \"
align=\"center\ ">SqFt.</td></tr>";
panel.innerHTML += dataArray[index];
panel.innerHTML += "</table">;
}
</script>
</td>
</tr>
<tr>
<td><a href="#" onClick="javasc ript:changePage (0);">1</a> | <a
href="#" onClick="javasc ript:changePage (1);">2</a></td>
</tr>
</table>
</body>
</html>
