G
Greg Scharlemann
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.getElementById('panel');
dataArray[0] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
align=\"center\"><a class=\"inlineActionLink\"
href=\"detailinfo.php?MlsNum=531245&nomap=true\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableContent\"
align=\"right\">129,900</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">1,720</td></tr>";
dataArray[1] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
align=\"center\"><a class=\"inlineActionLink\"
href=\"detailinfo.php?MlsNum=513195&nomap=true\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableContent\"
align=\"right\">124,500</td><td class=\"tableContent\"
align=\"center\">4</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">1,528</td></tr>";
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
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(index) {
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
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="javascript:changePage(0);">1</a> | <a
href="#" onClick="javascript:changePage(1);">2</a></td>
</tr>
</table>
</body>
</html>
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.getElementById('panel');
dataArray[0] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
align=\"center\"><a class=\"inlineActionLink\"
href=\"detailinfo.php?MlsNum=531245&nomap=true\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableContent\"
align=\"right\">129,900</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">1,720</td></tr>";
dataArray[1] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
align=\"center\"><a class=\"inlineActionLink\"
href=\"detailinfo.php?MlsNum=513195&nomap=true\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableContent\"
align=\"right\">124,500</td><td class=\"tableContent\"
align=\"center\">4</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">1,528</td></tr>";
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
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(index) {
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
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="javascript:changePage(0);">1</a> | <a
href="#" onClick="javascript:changePage(1);">2</a></td>
</tr>
</table>
</body>
</html>