Pagination Styles With FarCry

You would think the use of Farcry’s built-in pagination would be easy, but for some reason it’s not. Here’s how you do it.

Pass in your query to FarCry’s pagination tag with a few extra parameters.

<skin:pagination 
     query="#q#"
     typename="dmEvent" 
     r_stObject="stContent" 
     paginationID="page" 
     recordsPerPage="#stObj.numItems#" 
     pageLinks="#stObj.numPages#" 
     top="false">

 <skin:view 
 objectID="#stContent.objectID#" 
 typename="dmEvent" 
 webskin="displayTeaserStandard" />
 
</skin:pagination>

 

In this example, I am using a rule latest to select how many items and how many pages the user wants to display from our content object “dmEvents”, which is the attributes pageLinks, and recordsPerPage, the default on both is 10, but we want the user to control this through the rule.

The pageinationId attribute is oddly named, but this attribute is what the URL will append when going to another page, for example. mysite.com/events?page=2. You can leave this blank, or pass in whatever you like.

The skin is what gets displayed as the pagination loops. And using the above code will display FarCry’s default pagination look, it’s ok, but not great, and most likely will not match your design. So how do we skin?

I used to just target the output from FarCry in CSS, but that is a pain and only useful if you need a “straight-up” approach. So let’s do this the right way.

Our code above becomes.

<skin:pagination 
     query="#q#"
     typename="dmEvent" 
     r_stObject="stContent" 
     paginationID="page" 
     recordsPerPage="#stObj.numItems#" 
     pageLinks="#stObj.numPages#" 
     top="false"
     linksWebskin="displayPagePagination">

 <skin:view 
 objectID="#stContent.objectID#" 
 typename="dmEvent" 
 webskin="displayTeaserStandard" />
 
</skin:pagination>

Adding in the linksWebskin attribute gives use somewhere to place a skin, so now in our webskins folder we can create a dir called farPagination and drop in a custom webskin for our site wide pagination, in our case we call it displayPagePagination.cfm

Here is an example of what your pagination webskin could look like, I have dropped in all the available methods to you for use in making your pagination more robust, but this out of the box will get you going.

<!---
getQuery() query Returns the entire recordset.
getRecordSet() query Returns the entire recordset.
getTotalRecords() numeric Returns the number of records in the entire recordset.
getPageFrom() numeric Get the start page of the pagination loop.
getPageTo() numeric Get the end page of the pagination loop.
getRecordsPerPage() numeric Returns the number of records to be displayed per page.
getCurrentPage() numeric Get the current page.
getTotalPages() numeric Get the total number of pages.
getFirstPage() numeric Get the first page in the pagination loop.
getLastPage() numeric Get the last page in the pagination loop.
getRecordFrom() numeric Get the first row of the recordset for the current page of the pagination.
getRecordTo() numeric Get the last row of the recordset for the current page of the pagination.
getCurrentRow() numeric Get the current row of the recordset for the current page of the pagination.
getPaginationID() string Get the PaginationID for this instance of the pagination.
getNextRowAsStruct() struct Converts the current row of the recordset to a structure.
--->

<cfif getPageTo() GT 1>
 <cfoutput>
 <di v class='row'>
  <di v class='column'>
   <di v class='paginator-wrap'>
    <di v class='paginator text-center'>
      #renderLink(linkid="previous", linkText="<span class='arrows'>& lsaquo;</span> prev")#
      <cfloop from="#getPageFrom()#" to="#getPageTo()#" index="i">
        #renderLink(linkid=i)#
      </cfloop>
      #renderLink(linkid="next", linkText="next <span class='arrows'>& rsaquo;</span>")#
    </div>
   </div>
  </div>
 </div>
 </cfoutput>
 </cfif>

Note, the above code example has a space between the “d” and “iv” in div, because no matter what I tried, the code always rendered in the browser.

Advertisements

One thought on “Pagination Styles With FarCry

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s