Luis Majano

December 10, 2009

Spread the word

Share your thoughts

Let's learn how to use the paging carrousel plugin for ColdBox found in the ForgeBox directory.  First of all, download the plugin and drop in your custom plugins folder.

Settings setup

Make sure that you setup the following settings in your application:

PagingMaxRows - The maximum number of rows to show per page. Defaults to 10
PagingBandGap - The gap to use in the paging carrousel. Defaults to 5

You can also override the settings on the plugin, by using the appropriate setter methods in the plugin.

Handler setup

In your handler event, my case 'forgeservice.entries' you will setup the paging boundaries and the data call using these boundaries.  In my case, I have a model object that received the starting row and the maximum number of rows to return.  The paging plugin assumes there will be an incoming request collection variables called "page".  You do not need to param it or default it as the plugin does this for you.  All you have to do is construct a nice link with a page holder once you render the paging carrousel.  So to start just get the boundaries from the plugin:

// Get the paging boundaries, make sure there will be a "page" incoming variable, we use it to page.
rc.pageBoundaries = getMyPlugin("Paging").getBoundaries();

The previous call returns a structure with a startRow and maxRow element according to your settings and the page your are on.  You can use this information to present information back to the user like, showing records X to Y, etc.

// Call your model object for data
rc.entries = forgeService.getEntries(orderBy=rc.orderBy,

The next tricky part is to get the total count with no paging on it.  I have another method that does this for me, but this can be done in any approach you prefer.

// Get total entries count
rc.entriesTotal = forgeService.getEntriesTotal(typeSlug=rc.typeSlug);

View Setup
That's it for the handler code, now let's render the paging carrousel.  For this make sure you have the correct css setup for it.  The following are what is needed for the paging css:

.pagingTabs - The div container
.pagingTabsTotals - The totals
.pagingTabsCarrousel - The carrousel

Here is my sample css: /* Paging */ .pagingTabs{ font-size: .8em; text-align: left; margin: 20px 10px 15px 10px; } .pagingTabs a{ color: #000; padding: 2px 4px; background-color: #fff; border: 1px solid #ccc; margin-left: 2px; } .pagingTabs a:hover{ color: #000; background-color: #FCF9C3; border: 1px solid black; } .pagingTabs a.selected{ color: #000; background-color: #FCF9C3; border: 1px solid #AF3D15; } .pagingTabsCarrousel{ margin-top:5px; }

Now I can render it in my views:


That's it! I tell the paging plugin what is the link to attach to my carrousel and then pass a placeholder variable for my page: @page@.  This renders the carrousel and correct links.

Add Your Comment


Dec 10, 2009 01:58:52 UTC

by doug boude

Luis, in your example, does @page@ mean that if I use that in the buildlink method, CB will look for an rc variable named the same and replace the placeholder with the value?

Dec 10, 2009 02:02:59 UTC

by Luis Majano

Hi Doug, the plugin looks for the @page@ placeholder and replaces it with the correct page value. All this is inside the custom plugin. You can use buildLink() and it will leave your @page@ intact. The custom plugin is the one that translates it

Jan 20, 2011 10:50:15 UTC

by Alexandra

How can I download the plug in, I don't see a link!!!

Jan 20, 2011 12:09:44 UTC

by Luis Majano

The first link:

Jun 17, 2011 02:59:30 UTC

by West

What would I need to modify to have two paging widgets on the same page? Thanks

Jun 17, 2011 11:06:12 UTC

by Luis majano

Render two times you mean? Just call the render it method again

Recent Entries

Ortus Content Digest for week of August 12th

Ortus Content Digest for week of August 12th

It's August 12th... what has Ortus been publishing this week? We have the CFML News Podcast, some CFCasts and YouTube Videos, lots of Ortus and ITB Blog Posts. We have a lot more planned for next week as well.

Gavin Pickin
Gavin Pickin
August 12, 2022
Want native Redis Support in Lucee/CFML? Ortus Redis Extension v2.0.0 Released!

Want native Redis Support in Lucee/CFML? Ortus Redis Extension v2.0.0 Released!

We are very excited to bring you another release for our Redis Lucee Extension. This is a major release spawning research of over 9 months. We have done great strides in this new extension to not only bring you the best scaling capabilities via Redis, but also now to introduce to the CFML world: Real-Time messaging with Redis Pub/Sub! Here is our full release notes in our brand new documentation book: What's New With 2.0.0!

Luis Majano
Luis Majano
August 05, 2022