Paging controls for a spry dataset

[gwh3]

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 need some sort of paging controls so the user can see about 10 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 implement it:

http://labs.adobe.com/technologies/s...ingSample.html

I put the following code in the head section:

<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCSVDataSet.js" type="text/javascript"></script>
 
<script language="JavaScript" type="text/javascript">
<!--
var pageOffset = 0;
var pageSize = 10;
var pageStop = pageOffset + pageSize;
 
var dsHospPrivate = new Spry.Data.CSVDataSet("xml/HospPrivate.csv", {sortOnLoad: "Suburb", sortOrderOnLoad: "ascending"}, { filterFunc: MyPagingFunc });
 
 
 
function MyPagingFunc(ds, row, rowNumber)
{
if (rowNumber < pageOffset || rowNumber >= pageStop)
return null;
return row;
}
 
 
// Re-apply our non-destructive filter on dsStates1:
dsHospPrivate.filter(MyPagingFunc);
 
}
-->
</script>

The following code in the body section is the table that will be populated by the .csv file data:

  <h2 id="hospital_directory">Hospital directory</h2>
 
 
 
  <div id="privRegion" spry:region="dsHospPrivate">
 
  <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="dsHospPrivate" spry:even="dsHospPrivate other">
    <td>{Hospital}</td>
    <td>{Address}</td>
    <td>{Suburb}</td>
    <td>{State}</td>
    <td>{Postcode}</td>
    <td>{Phone}</td>
    <td>{Fax}</td>
  </tr>
  </tbody>
 
</table>
 
<p>
<input type="button" value="Prev" onclick="UpdatePage(pageOffset - pageSize);" />
<input type="button" value="Next" onclick="UpdatePage(pageOffset + pageSize);" />
</p>
 
 
</div>

When I test though, I get the following error:

"Failed to retrieve data set (dsHospPrivate) for spry:repeat"

I wondered if someone could tell me where I'm going wrong? My javascript coding is really limited so I may have copied the wrong code blocks from the example in the abovementioned url.

Also, I'm noticing that when the data comes in from the .csv file, any text that has an apostrophe in it, eg. children's - the apostrophe is not being rendered correctly in the browser, ie. it's being represented as a question mark in a triangle. Is there any way to fix this?

Appreciate any help.

 

[gwh3]

I've managed to progress a little bit more on this and have now got the following code:

<script type="text/javascript" src="SpryAssets/SpryData.js"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script language="JavaScript" 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.HTMLDataSet("data/hosp_private.html", "private", { filterFunc: MyPagingFunc });
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>

  <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 in">
 <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>

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 (if you know what I mean).

Anyone know what I'm doing wrong?