Search code examples
coldfusioncoldfusion-9

Add Page Numbers to Paginated Data


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>

Solution

  • 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>