Posted in ColdFusion | Posted on 04-24-2006 | 22,230 views
One of the more common tasks a web developer gets asked to do is add pagination to a result set. By pagination I simply mean displaying one "page" of content at a time. So if you had 22 records and wanted to show 10 at a time, there would be three pages of content. Let's take a look at one way to solve this problem.
First, let's get some data:
2
3<cfloop index="x" from="1" to="22">
4 <cfset queryAddRow(data)>
5 <cfset querySetCell(data,"id",x)>
6 <cfset querySetCell(data,"name","User #x#")>
7 <cfset querySetCell(data,"age",randRange(20,90))>
8 <cfset querySetCell(data,"active",false)>
9</cfloop>
I use queryNew to create a "fake" query. I then populate it with random data. Normally you would have a real cfquery here, but I think you get the point. Now I'm going to need to know how many items to show per page. I could hard code a number and use that, but I know it's best to abstract this into a variable:
I'd probably suggest an application variable actually as if you use pagination in one place, you will probably use it in multiple places, and you want to be consistent. Next I'm going to create a variable that will tell me what record I'll be starting with. This isn't the current page per se, but ends up being the same thing. So if we had 22 records, the first page will start with record 1. The second page will start with record 11. Here is the variable I will use along with the validation:
2<cfif not isNumeric(url.start) or url.start lt 1 or url.start gt data.recordCount or round(url.start) neq url.start>
3 <cfset url.start = 1>
4</cfif>
There is a lot going on in that conditional, so let me break it out. IsNumeric will ensure that the URL variable is a number and not some other string like "apple." The lt 1 and gt data.recordCount simply ensures we are starting between 1 and the total number of rows in the query. Lastly, the round check simply ensures we have an integer value and not something like 10.2. Probably a bit overkill, but you can't be too careful with URL (and other client controlled) data.
Now let's display the data:
2
3<cfoutput query="data" startrow="#url.start#" maxrows="#perpage#">
4#currentrow#) #name#<br />
5</cfoutput>
Nothing magic here. I simply tell cfoutput to loop from the starting index and stop after perpage records. Notice my lovely use of HTML. Ok, my design sucks, but you get the idea. Now let's do the pagination code:
2[
3<cfif url.start gt 1>
4 <cfset link = cgi.script_name & "?start=" & (url.start - perpage)>
5 <cfoutput><a href="#link#">Previous Page</a></cfoutput>
6<cfelse>
7 Previous Page
8</cfif>
9/
10<cfif (url.start + perpage - 1) lt data.recordCount>
11 <cfset link = cgi.script_name & "?start=" & (url.start + perpage)>
12 <cfoutput><a href="#link#">Next Page</a></cfoutput>
13<cfelse>
14 Next Page
15</cfif>
16]
17</p>
Basically there are two things going on here, ignoring my simple HTML. The first cfif block checks to see if we need to make a linked or plain text "Previous Page" output. If url.start is above 1, then we need to make the previous link hot. I do this by checking the current script_name. I could have hard coded it as well. I then simply set start to the current value minus the number of entries per page. Note - a user could change url.start so that it is a low number, like 3. Then the value in the link would be negative. However, I already took care of that so I'm covered. This link doesn't handle other URL variables in the link. I'll cover that in a later blog entry if folks are interested.
The next cfif block is virtually the same as the first one. The logic here is to check if the current starting row, plus the per page value, minus one, is less then the total. Seems a bit complex, but the basic idea is to see if we have complete additional page of records to display.
That's it! Very quick and simple pagination.
Note: I edited the entry due to a bug found by Fernando. Thanks Fernando!


I've been using the pagination that was supplied in the CF WACK book, but this is another way for me to learn what's going on.
I prefer to call it a "manual" query or more appropriately a "manual query result set". Bah. Semantics.
<cfparam name="startRow" default="1">
<cfparam name="rowsPerPage" default="20">
... cfquery or cfstoredproc ...
<cfset totalRecords = query.recordcount>
<cfset endRow = (startRow + rowsPerPage) - 1>
<!--- If the endrow is greater than the total, set the end row to to total --->
<cfif endRow GT totalRecords>
<cfset endRow = totalRecords>
</cfif>
<!--- Add an extra page if you have leftovers --->
<cfif (totalRecords MOD rowsPerPage) GT 0>
<cfset totalPages = totalPages + 1>
</cfif>
<!--- Display all of the pages --->
<cfloop from="1" to="#totalPages#" index="i">
<cfset startRow = ((i - 1) * rowsPerPage) + 1>
<a href="foo.cfm?startRow=#startRow#">#i#</a>
</cfloop>
A little verbose, but it manages extra pages just fine. You can refine the process to calculate the boundaries, but the practice is similar.
<cfset endRow = max(startRow+rowsperpage-1, totalrecords)>
Good stuff, RC.
There's a lot of ways to solve it, like use ceiling(recordcount/perpage) to know the exact number of pages you will have - just to say, as I don't like to be the guy who points the problem and don't solve it ;)
<cfif (url.start + perpage - 1) lt data.recordCount>
I'm going to update the blog entry in an hour or so. (Since printing doesn't show comments.)
The advantage of doing it within CF is that it is generalized for all datasources, but IMO the consequences are not worth it. I use a generic stored proc (mssql) to paginate any of my tables or views. It's been working like a charm for years.
The code works perfectly for small datasets, but if you have anything in the thousands (or millions like me) ... not such a good idea :)
Best wishes!
http://msdn.microsoft.com/library/default.asp?url=...
It includes various methods for doing pagination in MSSQL Server:
- Select Top (usually not practical)
- User-Specific Records (SQL Query or Stored Procedure)
- Application-Wide Records (Stored Procedure)
http://www.robgonda.com/blog/index.cfm/2006/4/25/M...
i need ur help. I want to implement pagination using flash forms...
Can u please guide me in this matter
I have a DELIMA!
How can I EFFICIENTLY implement a pagination system with the query has a 1 to many JOIN and the output is using GROUP?
The record count and start rows are NOT accurate to the groups of data being worked with....
for example, I could have a query that returns 5 rows, but in reality, it is 2 main rows, one with 2 JOINED rows and the other with 3 joined rows... pagination goes to hell real quickly!
Anyone go t a suggestion?
For example the initial page would be "Page 1 from 10", when you hit Next you would have "Page 2 from 10"...and so on...
Thanks.
you know how many rows per page...it's a variable in the script...
so if perpage = 10, and start = 21 (page 3) is:
Records #perpage# to #perpage+url.start#
However, the RecordCount counts those double records, before I group and output. So, even though my page says
Records 1 - 50 of 250 records, when it really should say something like 1-50 of 185 records. The difference of 65 records is directly related to the fact that some records are foreign keys in a different table, and may refer to the 'main' record more than once. Is there an efficient way to count the rows after the query and the grouping?
After my [query of a] query, I am simply looping through a <CFOUTPUT> grouping and setting a variable of how many actual rows (after being grouped) are to be displayed.
I know this can't be the most efficient way to do this, but it works for now. Any suggestions/improvements would be appreciated.
<cfset groupedRows = 0>
<cfoutput query="FilterDocs" group="fulldoc_id">
<cfset groupedRows = groupedRows+1>
</cfoutput>
Raymond, thanks for your website and your CF work.
Cody R.
For applications that fall between the thousands or millions of records like Rob Gonda needs where you would want to do it in SQL and for just a few pages of records where Ray's pagination would work well and be very efficient, I use the cf_pager that is available in the CF exchange.
http://www.adobe.com/cfusion/exchange/index.cfm?ev...
This allows users to jump to pages in between first, last and next. It is very easy to deploy and reproduce on list pages through out your application.
Many thanks for your help with this one.
You mention in your conclusion that "This link doesn't handle other URL variables"
Would you be able to point me in the direction of one of your other "blog entries" that would cover this, or be able to post an example that covers multiple URL variables?
I would like to pass a URL variable to each page when a user clicks on the "Next Page" link.
Apologies for asking what may be a simple question, but I'm struggling at the momment.
Thanks for a great site and your help in the community. Its very much appreaciated.
Regards
Les
I had used the option you suggested but based on my line of code as shown below:
<cfset link = cgi.script_name & "?ShopTypeID=#URL.shoptypeid#&?start=" & (url.start + perpage)> (where i have added the variable to be passed on)
When the page is first run and say I have the default set to show 9 results out of a db of 10, the page shows 9 results as you would expect. But when I click on the "next page" link it returns those same 9 results instead of the next page with just the 1 result.
Any suggested would be greatly appreaciated.
Confused at this time in the morning:)
Les
"?ShopTypeID=#URL.shoptypeid#&?start=" &
should be
"?ShopTypeID=#URL.shoptypeid#&start=" &
Try that and see if it ficxes your problem.
Thanks for the suggestion above. It works perfectly.
I'm now off to the opticians:)
Thanks
Les
a { color: #444; font-size: 11px; text-decoration: none; }
a:hover { color: #777; text-decoration: underline; }
.pagination { color: #222; font-weight: bold; font-size: 12px; }
</style>
<cfparam name="url.startRow" default="1">
<cfparam name="url.rowsPerPage" default="10">
<cfset totalRecords = getInventory.recordcount>
<cfset totalPages = totalRecords / rowsPerPage>
<cfset endRow = (startRow + rowsPerPage) - 1>
<cfparam name="currentPage" default="1">
<!--- If the endrow is greater than the total, set the end row to to total --->
<cfif endRow GT totalRecords>
<cfset endRow = totalRecords>
</cfif>
<!--- Add an extra page if you have leftovers --->
<cfif (totalRecords MOD rowsPerPage) GT 0>
<cfset totalPages = totalPages + 1>
</cfif>
<!--- Display all of the pages --->
<cfif totalPages gte 2>
<cfloop from="1" to="#totalPages#" index="i">
<cfset startRow = ((i - 1) * rowsPerPage) + 1>
<cfif currentPage neq i>
<a href="foo.cfm?startRow=#startRow¤tPage=#i#">
<cfelse>
<span class="pagination">
</cfif>
#i#
<cfif currentPage neq i>
</a>
<cfelse>
</span>
</cfif>
</cfloop>
</cfif>
Thanks Ray.
I will post my code as the reference when time allows me. by the way, please go to http://newgugu.com/Softwares.cfm to see my pagination sample.
[Add Comment] [Subscribe to Comments]