Pagination using AJAX

The main page consists of three DIV's. The top and bottom DIV display paging links while the middle DIV displays the data. The code is given below. The generate query function is used here to get dummy data. The javascript function is called on each click to refresh the page. The contents of page link div is obtained from 'pagesList.cfm' and data div from 'countriesList.cfm'.

<cfset nPageSize = 10> <cfset pagenum = 1>
   
    <cfset objPagination =
   
CreateObject("component","#REQUEST.ReadOnlyData.componentpath#model.pagination")>
    <cfset rsPagination = objPagination.generateQuery()>
    <cfset nRecCount = rsPagination.RecordCount>
       
    <script language="javascript">
        function getPage(nPageNum)
        {           
          
          
ColdFusion.navigate('pagesList.cfm?nPageSize=10&nRecCount=100&nPageNum='+nPageNum,
'displayPagesTop');
          
ColdFusion.navigate('pagesList.cfm?nPageSize=10&nRecCount=100&nPageNum='+nPageNum,
'displayPagesBottom');
           ColdFusion.navigate('countriesList.cfm?pagenum=' +
nPageNum + '&totrec=100', 'dVProducts');
        }
    </script>
   
    <div>
    <!---Pagination at top--->           
       <cfdiv id="displayPagesTop"
bind="url:pagesList.cfm?nPageSize=#nPageSize#&nRecCount=#nRecCount#&nPageNum=1"
bindonload="true"/>                   
    </div>
   
    <div style="height:200px">
        <cfdiv id="dVProducts"
bind="url:countriesList.cfm?pagenum=#pagenum#&totrec=#nRecCount#"
bindonload="true"/>
    </div>
   
    <div>
        <!---Pagination at bottom--->           
        <cfdiv id="displayPagesBottom"
bind="url:pagesList.cfm?nPageSize=#nPageSize#&nRecCount=#nRecCount#&nPageNum=1"
bindonload="true"/>                   
    </div>    

The code for pagesList.cfm:

    <cfset nPageSize = URL.nPageSize>
    <cfset nRecCount = URL.nRecCount>
    <cfset nPageNum = URL.nPageNum>
    <cfset objPagination =
   
CreateObject("component","#REQUEST.ReadOnlyData.componentpath#model.pagination")>
   
   
<cfoutput>#objPagination.getPagesList(nPageSize,nRecCount,nPageNum)#</cfoutput>
   

The code for countriesList.cfm:

    <cfset nPageSize = 10>
    <cfset nRecCount = URL.totrec>
    <cfset nPageNum = URL.pagenum>
  
    <cfset objPagination =
CreateObject("component","#REQUEST.ReadOnlyData.componentpath#model.pagination")>
    <cfset rsCountryCodes = objPagination.generateQuery()>
   
    <cfif nRecCount neq 0>
        <cfset StartRow = Min((pagenum-1)* nPageSize +
1,Max(nRecCount,1))>
        <cfset EndRow = Min(StartRow + nPageSize-1,
nRecCount)>
    <cfelse>
        <cfset StartRow = 1>
        <cfset EndRow = nPageSize>
    </cfif>
   
    <cfoutput query="rsCountryCodes" startrow="#StartRow#"
maxrows="#nPageSize#">
        <div>
            #rsCountryCodes.countryCode# ---
#rsCountryCodes.countryName#       
        </div>
    </cfoutput>

The code for Pagination.cfc:

 
Both the above pages call upon this
component for actual
pagination. 
 


<cfcomponent output="false">
        <cffunction name="getPagesList" access="public"
output="false" returntype="string">
            <cfargument name="nPageSize" type="numeric"
required="true" hint="Page Size">
            <cfargument name="nRecCount" type="numeric"
required="true" hint="Total Record Count">
            <cfargument name="nPageNum" type="numeric"
required="true" hint="Page Number(current page)">
                                
            <cfscript>
                var sPagingInfo = "";
                var nPageCount = 0;
                var nFromCount = 1;
                var nLngthCntr = 0;
        
                if (ARGUMENTS.nRecCount > ARGUMENTS.nPageSize)
                    sPagingInfo = "page ";
        
                if (ARGUMENTS.nPageNum gt 1)
                    sPagingInfo = "<a href='##'
onclick='getPage(#ARGUMENTS.nPageNum - 1#)'> <<  Prev
</a>";
        
                nPageCount = Ceiling(ARGUMENTS.nRecCount /
ARGUMENTS.nPageSize);
        
                if (ARGUMENTS.nPageNum gt 4 and nPageCount gt 4)
                    nFromCount = ARGUMENTS.nPageNum - 2;
        
                if (fix(nPageCount) gt 1) 
                {
        
                   for (i = nFromCount; i lte nPageCount; i = i +
1)
                   {
                      if (ARGUMENTS.nPageNum eq i)
                         sPagingInfo = sPagingInfo & "<a
class='active' href='##' onclick='getPage(#i#)'>" & i;
                      else
                         sPagingInfo = sPagingInfo & "<a
href='##' onclick='getPage(#i#)'>" & i;
                        
                      nLngthCntr = nLngthCntr + 1;
                      if (nLngthCntr gte 5)
                      {
                          sPagingInfo = sPagingInfo &
"&nbsp;... </a> ";
                          break;
                      }
                      else
                          sPagingInfo = sPagingInfo &
"</a> ";
                }
                if (ARGUMENTS.nPageNum lt nPageCount)
                    sPagingInfo = sPagingInfo & "<a
href='##' onclick='getPage(#ARGUMENTS.nPageNum + 1#)'>&nbsp;
Next>> </a>";
            </cfscript>       
        
            <cfreturn sPagingInfo>
        </cffunction>

</cfcomponent>

Thazleem Ali :: Software Enginner :: www.toobler.com :: India