Add Page Numbers to Paginated Data

1
votes

I have implemented pagination to my data, but the problem is I only have the Next and Previous links, like so:

enter image description here

What I would like to do is add page numbers, with the page number I am on as normal text, and the other pages as links. So if I am on page 3 of 5, it would like look like this:

enter image description here

Here is what I have so far:

<cfset data = queryNew("id,name,age,active","integer,varchar,integer,bit")>

<cfloop index="x" from="1" to="50">
<cfset queryAddRow(data)>
<cfset querySetCell(data,"id",x)>
<cfset querySetCell(data,"name","User #x#")>
<cfset querySetCell(data,"age",randRange(20,90))>
<cfset querySetCell(data,"active",false)>
</cfloop>

<cfset perpage = 10>

<cfparam name="url.start" default="1">
<cfif not isNumeric(url.start) or url.start lt 1 or url.start gt data.recordCount or round(url.start) neq url.start>
<cfset url.start = 1>
</cfif>

<h2>Random People</h2>

<cfoutput query="data" startrow="#url.start#" maxrows="#perpage#">
#currentrow#) #name#<br />
</cfoutput>

<p align="right">
[
<cfif url.start gt 1>
<cfset link = cgi.script_name & "?start=" & (url.start - perpage)>
<cfoutput><a href="#link#">Previous Page</a></cfoutput>
<cfelse>
Previous Page
</cfif>
/
<cfif (url.start + perpage - 1) lt data.recordCount>
<cfset link = cgi.script_name & "?start=" & (url.start + perpage)>
<cfoutput><a href="#link#">Next Page</a></cfoutput>
<cfelse>
Next Page
</cfif>
]
</p>
2
coldfusioncoldfusion-9
you could create a list of numbers based on the number of records divided by the number of pages, then determine what page they are on using the url. <cfset paginationpage = int(url.start/perpage) /> – Matt Busche

2 Answers

2
votes

There is a very good ColdFusion Open Source pagination project on RIAForge: http://paginationcfc.riaforge.org/. It covers everything you need and comes with a lot of predefined styles. At least you can analyze the code and customize it to meet your requirements.

1
votes

This was a fun question. How about this to build your list of page links:

<cfset pageList = "">
<cfloop from="1" to="#ceiling(data.RecordCount/perpage)#" index="i">
    <!--- Determine the start record for selected page --->
    <cfset targetRecord = 1 + (perpage * (i - 1))>
    <cfif ceiling(url.start/perpage) NEQ i>
        <cfset link = cgi.script_name & "?start=" & targetRecord>
        <cfset pageList = listAppend(pageList, "<a href=""#link#"">#i#</a>", " ")>
    <cfelse>
        <cfset pageList = listAppend(pageList, i, " ")>
    </cfif>
</cfloop>

Now you can just drop pageList into your navigation section like so:

<p align="right">
[
<cfif url.start gt 1>
    <cfset link = cgi.script_name & "?start=" & (url.start - perpage)>
    <cfoutput><a href="#link#">Previous Page</a></cfoutput>
<cfelse>
    Previous Page
</cfif>
/
#pageList#
/
<cfif (url.start + perpage - 1) lt data.recordCount>
    <cfset link = cgi.script_name & "?start=" & (url.start + perpage)>
    <cfoutput><a href="#link#">Next Page</a></cfoutput>
<cfelse>
    Next Page
</cfif>
]
</p>