Hi everyone,
I'm using a .csv file as the basis for a spry dataset. I've got it working and the data is getting inserted into a table dynamically. Since there'll be quite a lot of rows in the table, I'm trying to implement some paging controls so the user can see about 20 rows at a time and then page through the rest of the rows.
I've seen the example at the following url and I'm trying to get it working:
I've included all my code below.
When I test, The first 20 rows appear but then these 20 rows are repeated another 20 times, so the first 20 rows are duplicated 20 times on the one page, i.e 400 rows are being displayed (if you know what I mean). The paging is also working via the buttons but each of the 20 rows (20 x 20) are being paged simultaneously, and I only want one set of 20 rows to appear at any one time.
Anyone know what I'm doing wrong?
Appreciate any help.
I'm using a .csv file as the basis for a spry dataset. I've got it working and the data is getting inserted into a table dynamically. Since there'll be quite a lot of rows in the table, I'm trying to implement some paging controls so the user can see about 20 rows at a time and then page through the rest of the rows.
I've seen the example at the following url and I'm trying to get it working:
I've included all my code below.
When I test, The first 20 rows appear but then these 20 rows are repeated another 20 times, so the first 20 rows are duplicated 20 times on the one page, i.e 400 rows are being displayed (if you know what I mean). The paging is also working via the buttons but each of the 20 rows (20 x 20) are being paged simultaneously, and I only want one set of 20 rows to appear at any one time.
Anyone know what I'm doing wrong?
Appreciate any help.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"><!--[/URL] InstanceBegin template="/Templates/inner.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled</title>
<!-- InstanceEndEditable -->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/inner.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<link href="css/tables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryData.js"></script>
<script type="text/javascript" src="SpryAssets/SpryCSVDataSet.js"> </script>
<script type="text/javascript" src="SpryAssets/SpryPagedView.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var pageOffset = 0;
var pageSize = 20;
var pageStop = pageOffset + pageSize;
var dsHospPrivate = new Spry.Data.CSVDataSet("data/HospPrivate.csv");
var pv1 = new Spry.Data.PagedView(dsHospPrivate,{pageSize: 20});
function MyPagingFunc(ds, row, rowNumber)
{
if (rowNumber < pageOffset || rowNumber >= pageStop)
return null;
return row;
}
function UpdatePage(offset)
{
var numRows = dsHospPrivate.getUnfilteredData().length;
if (offset > (numRows - pageSize))
offset = numRows - pageSize;
if (offset < 0)
offset = 0;
pageOffset = offset;
pageStop = offset + pageSize;
// Re-apply our non-destructive filter on dsStates1:
dsHospPrivate.filter(MyPagingFunc);
}
-->
</script>
<!--<script type="text/javascript" src="js/striped_table.js"></script>-->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="fullWidthHeader"></div>
<div id="outerWrapper">
<div id="branding">
<h1><a href="index.php">Company name</a></h1>
<div id="nav_main">
<h2>Site areas</h2>
<ul>
<li id="nav_home"><a href="index.php">Home</a></li>
<li id="nav_about"><a href="about.php">About us </a></li>
<li id="nav_fees"><a href="fees.php">Fee structure</a></li>
<li id="nav_packages"><a href="welcome_packs.php">Welcome packs</a></li>
<li id="nav_directory"><a href="directory.php">Hospital directory</a></li>
<li id="nav_area"><a href="local_area.php">Local area</a></li>
<li id="nav_"><a href="location_map.php">Location map</a></li>
<li id="nav_contact" class="last"><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
<!-- InstanceBeginEditable name="Inner_content" -->
<div id="content_inner">
<h2 id="hospital_directory">Hospital directory</h2>
<p>
<input type="button" value="Prev" onclick="UpdatePage(pageOffset - pageSize);" />
<input type="button" value="Next" onclick="UpdatePage(pageOffset + pageSize);" />
</p>
<div spry:region="pv1">
{data}
</div>
<div id="privRegion" spry:region="pv1" spry:repeatchildren="pv1">
<table id="private" cellspacing="0" summary="A list of private hospitals">
<caption>Private Hospitals </caption>
<thead>
<tr>
<th id="name" scope="col" spry:sort="Hospital"><a href="#">Hospital</a>
</td>
<th id="address" scope="col">Address</td>
<th id="suburb" scope="col" spry:sort="Suburb"><a href="#">Suburb</a>
</td>
<th scope="col">State
</td>
<th scope="col">Postcode</td>
<th scope="col">Phone</td>
<th scope="col">Fax</td>
</tr>
</thead>
<tbody>
<tr spry:repeat="pv1" >
<td>{Hospital}</td>
<td>{Address}</td>
<td>{Suburb}</td>
<td>{State}</td>
<td>{Postcode}</td>
<td>{Phone}</td>
<td>{Fax}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- InstanceEndEditable --><div id="clearfooter"> </div> </div>
<div id="fullWidthFooter"><p id="site_info">© 2009. All rights reserved. <a href="terms_conditions.php">Terms and conditions</a> | <a href="privacy_policy.php">Privacy policy</a> | <a href="contact.php">Contact Us </a></p></div>
</body>
<!-- InstanceEnd --></html>
