Adobe ColdFusion 9 Pagination looping issue

Question

I am working on an application that is displaying pagination incorrectly. Here is the code:

  <cfif ...>
     <cfoutput><li class=""><a href="#FP#">First</a></li></cfoutput>
     <cfoutput><li class=""><a href="#link#">Previous</a></li></cfoutput>
  <cfelse>
  </cfif>

  <!--- Start Page Numbers --->
  <cfset totalPages = Ceiling(SmartGuideSearchRet.recordCount / perpage)>
  <cfset whichPage = round((url.start)/perPage + 1)>

  <cfloop index="a" from="1" to="#totalpages#"> //returns total pagination tabs
      <cfoutput>
      <cfset whichPage = round((url.start)/perPage + 1)>
      <cfif pagecount EQ whichPage>
         <li class="active" id="wp"><a href="?start=#pageLink#">#pagecount#</a></li>  
      <cfelse>
        <li id="wp"><a href="?start=#pageLink#">#pagecount#</a></li> 
      </cfif>
     </cfoutput>

     <cfset pageCount = pageCount + 1>
     <cfset pageLink = pageLink + perpage>
  </cfloop>
  <!--- End Page Number ---> 

  <cfif (url.start + perpage - 1) lt SmartGuideSearchRet.recordCount>
     <cfset link = cgi.script_name & "?start=" & (url.start + perpage)>
     <cfset LP = cgi.script_name & "?start=" & (SmartGuideSearchRet.recordCount)>

     <cfoutput><li><a href="#link#">Next</a></li></cfoutput>
     <cfoutput><li><a href="#LP#">Last</a></li></cfoutput>
  <cfelse>
  </cfif>

Here is the output on my application:

This is how I want my pagination to look like:

I want it to loop through the total pages but only show 10 pagination tabs at a time so from 1-10 then 10-20 20-30 30-40 etc... until the total number of pagination tabs is reached.

Here is an image of how the start should look like:

I am still new to Coldfusion but I just cannot think of the logic. Any help is appreciated.

Answer 1

Consider using Nathan Strutz's Pagination CFC. It was written specifically for this purpose and comes with many options & features you haven't mentioned (including styling).

http://www.dopefly.com/projects/pagination/

Example integration (from the website):

<cfset pagination = createObject("component", "components.Pagination").init() />
<cfset pagination.setQueryToPaginate(myQuery) />
<cfset pagination.setBaseLink("/app/photolist.cfm?year=2007") />
<cfset pagination.setItemsPerPage(25) />
<cfset pagination.setUrlPageIndicator("page") />
<cfset pagination.setShowNumericLinks(true) />

<cfoutput>#pagination.getRenderedHTML()#</cfoutput>

<cfoutput query="myQuery" startrow="#pagination.getStartRow()#" maxrows="#pagination.getMaxRows()#">
<li>#id# - #name#</li>
</cfoutput>

<cfoutput>#pagination.getRenderedHTML()#</cfoutput>