Another Spry demo

The more I play with Spry, the more I like it. I’d like to show you one more demo…

I’ve added two cool things here. First is the alt-table row colors. This is done by Spry’s support for conditionals. Here is the code behind it:

<tbody spry:repeat="dsEntries"> <tr spry:if="({ds_RowNumber} % 2) == 0" class="even" onclick="dsEntries.setCurrentRow('{ds_RowID}');" > <td>{TITLE}</td> <td>{POSTED}</td> <td>{COMMENTCOUNT} </td> </tr> <tr spry:if="({ds_RowNumber} % 2) != 0" class="odd" onclick="dsEntries.setCurrentRow('{ds_RowID}');" > <td>{TITLE}</td> <td>{POSTED}</td> <td>{COMMENTCOUNT} </td> </tr> </tbody>

Notice the spry:if check. This handles checking the current row number and using a different CSS class for each row. Nice and simple. The only thing I wasn’t sure about was how to use it. The last version applied the spry:repeat to the TR tag. Since I needed the condition in the TR, I wasn’t sure how they would mix. One of the Spry demos showed the technique above though and it worked like a charm.

In the zip you can download from Adobe, they have a few additional examples not demonstrated on the Labs site. One is pagination. View source on the demo to see the JavaScript behind it. Just to be clear - I didn’t write this. I simply cut and pasted from the example in the zip, but I’m again impressed with how simple this is. Note the use of the filter function in the xml call:

var dsEntries = new Spry.Data.XMLDataSet("blogspry.cfc?method=getentries&category={dsCategories::CATEGORYID}", "entries/entry", { filterFunc: MyPagingFunc });

You can obviously filter by other methods as well. Anyway, check it out, view source, and enjoy. I didn’t update the zip, but the only change to the CFC was that I upped the max number of results to 100 so that paging would actually work.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA