The Easiest Method for "Previous | Next" Recordset Navigation (aka - Recordset Paging) 

This tutorial, like my others, is designed to provide a very easy method for accomplishing a task many people find quite difficult. This time I want to provide a simple and quick way for CF'ers to add Recordset Navigation to their website. Though the methods are easy, the end result is a robust and complete solution that will work on any size application.

First things first, Recordset Navigation, or as some call it, Recordset Paging, is the process of using Previous and Next links or buttons to allow users to navigate through a large number of returned records. In general this usually involves determining how many records per page are to be displayed, as well as providing information about how many total records were returned, and where the user is in terms of record numbers at any given time.

This is usually thought to be a very difficult process, but I'm going to attempt to demystify it now. So let's get started:

For the record, lets say that this page is named users.cfm more on that later.
Any Recordset Navigation must start with a query. For this example we'll make a query that returns a list of names and email addresses.

<!--- the query for which we want to add the recordset navigation --->
<cfquery name="getNames" datasource="#yourdatasource#">
    SELECT first_name, last_name, email
    FROM user_info
</cfquery>

Next we'll want to output the results of this query, and we'll then go back and add the navigation elements.
<!--- output the results of the query --->
<table>
    <tr>
        <td>
First Name</td>
        <td>
Last Name</td>
        <td>
Email Address</td> 
    </tr>
 
    <cfoutput query="getNames">
    <tr>
        <td>
#first_name#</td>
        <td>
#last_name#</td>
        <td>
#email#</td> 
    </tr> 
    </cfoutput> 
</table>

That's our simple query output. However, if a query returns a bunch of records, we need to provide a useful way for our users to navigate through them all. This is where Recordset Navigation comes in. The following will describe each of the needed elements we'll have to add to make recordset navigation a reality. Then we'll put it all together at the end for a real, working example.

<!--- First lets set our current row and max rows variables --->
<!--- This sets a default value for our url.currentrow variable, which is needed for the initial page of results as a previous or next link will not have been clicked yet. --->

<CFPARAM name="URL.currentrow" default="1">
<!--- This sets the qmaxrows variable, which is the maximum number of records we want to be displayed on each page. So if the query returns 100 total records and we set qmaxrows to 10, we will then have 10 pages of 10 records each. --->
<cfset qmaxrows = 10>
<!--- Here we'll set the next and prev variables. These variables will be used in our previous and next links. --->
<CFSET next = URL.currentrow + qmaxrows>
<CFSET prev = URL.currentrow
- qmaxrows>

<!--- Next lets get the total number of records returned by our query, and call that 'qtotal'. We will use this to let the user know how many total records there are to navigate through. --->
<cfset qtotal = getNames.recordcount>

<!--- Lets also create a variable for the number of the last recorded returned for each page and call it thispagemax ...huh? For our example of a query that returns 100 total results, and we're displaying 10 per page, for the first page thispagemax would be 10, for the second thispagemax would be 20, for the 6th it would be 60. You'll see how this is useful in a minute. --->
<cfset thispagemax = (qmaxrows + url.currentrow) - 1>

<!--- After we end our cfquery output, at the bottom of each page we'll want to show the users a running tab of exactly how many total records were returned, what page they are are currently on and how many total pages there will be. --->
<cfoutput>
    Showing #URL.currentrow# - 
    <cfif thispagemax GT qtotal>
       
#qtotal#
    <cfelse>
       
#thispagemax#
    </cfif>
of #qtotal# records.
</cfoutput>


<!--- Finally, lets not forget our Previous and Next links, we might need those! --->
<a href="users.cfm?currentrow=#prev#">PREVIOUS</a> | <a href="users.cfm?currentrow=#next#">NEXT</a>

Those are all of the elements we'll need to get this bad boy running. Now lets put it all together! Here's the entire working code. See how easy that was!

About This Tutorial
Author: Ryan BeMiller
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5,CFMX
Total Views: 36,416
Submission Date: September 15, 2004
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
  • this query will always return every row, even though all of the rows are never output, so each time it gets all and shows some. Wouldn't it make more sense to get some and show those? Also, it may help to use CFIF to make sure that "previous" doesn't appear when there are no previous entries There are only previous entries if... < cfif URL.currentrow gt 1>

  • Isnt this meant to be a tutorial site? If people gave away the whole code then none of us would learn.

  • It returns all rows on all pages! how long to you have to wait for the page to load when there are 10,000 or 20,000 results?

  • Hi all, I'm the creator of this tutorial. FYI- not all of the tutorial I submitted is shown here. The most important part, the complete working example code, is not showing up. I'll try to resolve the problem. Ryan

  • It displays the first page just great, but I get the following error for next and previous. (I am actually using this with a cfdirectory query if that makes a difference) The value "" cannot be converted to a number The error occurred in C:\Inetpub\wwwroot\carolyn\EquipmentNewsletter\Editor\remote_file_list_all_pages.cfm: line 196 194 : 195 : 196 : 197 :

  • Something else that is left out is any URL and/or Form params that may be required in the request in order for your app to work.. for example if you use this code in a fusebox app it would not work as expected, you would need to carry the fuseaction and any other needed params so that the request will return the page as entended..

  • Just put the STARTROW="#url.currentRow#" and MAXROWS="#qMaxRows#" parameters into the tag, a'la:

  • Matt I got a error: The tag does not allow the attribute(s) STARTROW. The valid attribute(s) are when I wrote the query the way you did above. This still does not work.

  • SELECT first_name, last_name, email FROM user_info Maxrows and Startrow needs specifiying to output the correct data.. otherwise only the 'showing 1 to 10 of 12' bit will change. This does mean you should place the query after setting the default parameter values for qMaxRows and URL.currentRow.

  • ..this code is incomplete and will not do as it states. How is it meant to display the correct records when the query is just returning all of the results every time? You missed the part where you output the query results based on the url variable passed in the links.

Advertisement

Sponsored By...
Powered By...