Ask a Jedi: Simple ColdFusion 8 Ajax Pagination

This post is more than 2 years old.

Omer asks:

I am looking for a way to navigate videos without refreshing the page. Currently I have pagination on the page and I only show 10 videos at a time. I only want portion of page to change when user select a different page number. I want to explore cfdiv and any other coldFusion 8 functions to accomplish this task. Thanks for your help in this regard.

This is pretty similar to how I used to do pagination on ColdFusionBloggers.org. That site now is mostly jQuery based, but here is a simple demo of how it could be done using just what ColdFusion 8 provides.

First, we will begin with our main page. The pagination will all be run via a DIV:

<h2>My Page</h2>

<cfdiv bind="url:test2.cfm" />

The cfdiv tag will output a div and automatically load the url, test2.cfm, as soon as the page loads. (Got to love how easy that is in ColdFusion!)

Now let's look at test2.cfm. 99% of the code here is my simple pagination code. It's not perfect, and it's fake of course, but here is it:

<cfparam name="url.start" default="1"> <cfset total = 92> <cfset perpage = 10>

<cfloop index="x" from="#url.start#" to="#min(url.start+perpage-1, total)#"> <cfoutput>Record #x#<br /></cfoutput> </cfloop>

<cfoutput> <cfif url.start gt 1> <a href="#ajaxLink('#cgi.script_name#?start=#url.start-perpage#')#">Previous</a> <cfelse> Previous </cfif> / <cfif (url.start+perpage-1) lt total> <a href="#ajaxLink('#cgi.script_name#?start=#url.start+perpage)#">Next</a> <cfelse> Next </cfif> </cfoutput>

There is a grand total of one thing I had to do to make this work within my Ajax-loaded div from the previous template. I wrapped the links with ajaxLink. This will automatically convert the link into code that will use Ajax to load the data and simply replace the contents of the current div.

You can view a live demo of this here. Personally I think this is a rather nice, if simple, use of Ajax. Paging through lots of data can be slow and tedious, and anything that can make it a bit nicer is probably a good idea.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Jean Moniatte posted on 12/15/2008 at 4:09 AM

It works, it is just too bad that both examples use obtrusive Javascript code.

Comment 2 by Raymond Camden posted on 12/15/2008 at 4:18 AM

But the JS works. It may not be the 'best' but it's practical and about as simple as you can get.

Comment 3 by Jean Moniatte posted on 12/15/2008 at 4:28 AM

Sure it does work. But you know what I mean, it is not considered a good practice anymore to mix HTML and Javacript code. It is not difficult to achieve, specially with libraries like jQuery.

Comment 4 by Raymond Camden posted on 12/15/2008 at 5:11 AM

Well, I don't think it's the point though. If you know jQuery, and feel comfortable using it, you aren't the target for this feature. Know what I mean? For a guy who knows little to no JS, you have to admit this is -very- powerful for such little code.

Comment 5 by Andy Sandefer posted on 12/15/2008 at 9:01 PM

Is there any reason why we wouldn't just use the html format cfgrid to do this? Lots of built in sorting and other functionality is already built in. Plus it is extremely easy to add listener style "find as you type" searching to that grid. I know that you were going for simple but I'm just throwing this out there as another simple idea that gets the job done with very little code.

Comment 6 by Omer posted on 12/16/2008 at 1:01 AM

This is exactly what I wanted. Thanks a lot for your help. You are a great resource of help for people like me, once again thanks for your time and concern.

Comment 7 by Raymond Camden posted on 12/16/2008 at 3:43 AM

@AS - It was my assumption he wanted more of a simple list then a table.

Comment 8 by Andy Sandefer posted on 12/16/2008 at 3:45 AM

@Ray
Based on his follow up comments I'd say you gave him exactly what he wanted! Another happy customer - LOL.

Comment 9 by David McGuigan posted on 12/17/2008 at 1:06 PM

Jean: It depends on who you ask. A lot of people think that the "unobtrusive Javascript approach" is a crock of horse and does little more than add extra maintenance and scavenger-hunt-like round tripping to an AJAX app.

It's easy to make the argument that interactivity and mutational and reactive interface programming is fundamentally different than visual skinning and presentationing. That interactivity is immutably tied to the structure and layout of an interface, and that it therefore makes more sense on all levels to an appropriate portion of Javascript live nextdoor to and among the markup it's managing.

Comment 10 by IchieChrist posted on 3/7/2013 at 12:14 AM

is there a way i can make this work in coldfusion 9?

Comment 11 by Raymond Camden posted on 3/7/2013 at 12:28 AM

It should just work. Is it not?