Paginating A Collection

Vae’s paginate attribute allows you to limit the number of entries the <v:collection> tag will output. Here’s an example code snippet hat outputs two text fields from a Collection called ‘Artists’. There are three entries in our Collection, and we will output all three entries.

<h1>Welcome to Vae Records!</h1>
<v:collection path="artists">
 <h3><v:a href="/artist"><v:text path="artist_name"/></v:a></h3>
 <v:text path="artist_bio"/>
 </v:collection path="Artists">
 <v:select id="menu" />

And here’s how this might look when renedered on a website:

If for some reason we decided we’d like to display just two Artists at a time, Paginate becomes very handy. For our example, we’ll also use an attribute of <v:collection> called page_select. This allows us to specify a select menu which can be used to navigate between pages.

<v:collection path="artists" page_select="menu" paginate="2">
 <h3><v:a href="/artist"><v:text path="artist_name"/></v:a></h3>
 <v:text path="artist_bio"/>
</v:collection path="Artists">
<v:select id="menu" />

And now the collection displays in two separate pages:

Page 2:

If you’d instead like to use links to navigate, the next and previous attributes allow you to specify <v:a> tags to use for navigation. Here’s our code, modified to to produce ‘Next’ and ‘Previous’ links.

<v:collection path="artists" page_select="menu" next="next" previous="prev" paginate="2">
 <h3><v:a href="/artist"><v:text path="artist_name"/></v:a></h3>
 <v:text path="artist_bio"/>
</v:collection path="Artists">
<v:a id="next">Next</v:a> 
<v:a id="prev">Previous</v:a>

Here’s the two pages that are then rendered:

Page 2: