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

CBWIRE 3.1 Released

CBWIRE 3.1 Released

I'm very excited to announce the latest release of CBWIRE, version 3.1. This release contains a couple of bug fixes, but mostly it's packed with new features that you can start using right away in your applications.

Grant Copley
Grant Copley
September 25, 2023
See you at Adobe CFSummit 2023!

See you at Adobe CFSummit 2023!

We're proud sponsors of Adobe CFSummit 2023, and we can't wait to meet you there! Swing by our booth for a chat, and don't miss the chance to engage in exciting activities and win fabulous prizes to enhance your CFML Web App development.

** We’re excited to meet you at CFSummit 2023. Visit our booth and come say hi!**

Maria Jose Herrera
Maria Jose Herrera
September 25, 2023
CFCast Series: Mastering CBWIRE 3

CFCast Series: Mastering CBWIRE 3

CBWIRE, a ColdBox module, enables you to quickly develop modern, responsive CFML applications without relying heavily on JavaScript or creating backend APIs. With CBWIRE, you can become a web development hero!

We have just published the first video of our series, more coming soon!

Maria Jose Herrera
Maria Jose Herrera
September 20, 2023