Created
December 9, 2016 16:33
-
-
Save 18thAvenue/fcf7724345cf3ecae36b87f8b9039ae6 to your computer and use it in GitHub Desktop.
CFWheels Bootstrap 4 Pagination Function (Tag Based)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--- | |
Instructions: Place this function in functions.cfm | |
In your findall(): | |
myquery=model("Mymodel").findAll(page=params.page, perPage=params.perpage,handle="myHandleName"); | |
In your view template place this code for the pagination links: | |
#bs4Pagination(paginationHandle="myHandleName",activepage="#params.page#",params="Not Required(optional params)")# | |
You can see in function arguments other parameters you can pass in from the bs4Pagination() function. ---> | |
<cffunction name="bs4Pagination" returntype="string" hint="CFWheels Bootstrap 4 pagination"> | |
<cfargument name="paginationHandle" type="string" required="true" hint="This is the name of your pagination handle from your findAll function in your controller."> | |
<cfargument name="windowSize" type="numeric" default="5" hint="Number of links on each side of current page"> | |
<cfargument name="route" type="string" default=""> | |
<cfargument name="controller" type="string" default=""> | |
<cfargument name="action" type="string" default=""> | |
<cfargument name="key" type="string" default=""> | |
<cfargument name="params" type="string" default="" hint="Additional parameters to be added after ?page=n"> | |
<!--- <cfargument name="activepage" type="string" default="1" hint="Set activepage= in calling page to your url page parameter (params.page)"> ---> | |
<cfset var loc.paginationData = pagination("#arguments.paginationHandle#")> | |
<cfset var loc.result = ""> | |
<cfset var loc.previous = ""> | |
<cfset var loc.next = ""> | |
<cfset var loc.loopfrom = "2"> | |
<cfset var loc.loopto = "#loc.paginationData.totalPages-1#"> | |
<cfset var loc.li_activeClass = ""> | |
<cfset var loc.showAnchorDividerLeft = "Yes"> | |
<cfset var loc.showAnchorDividerRight = "Yes"> | |
<cfset var loc.linktoStruct = {}> | |
<!--- Determine wether to show anchorDivider on each side of window size ---> | |
<cfset loc.loopfrom = loc.paginationData.currentpage - arguments.windowsize> | |
<cfif loc.loopfrom lt 2> | |
<cfset loc.loopfrom = "2"> | |
</cfif> | |
<!--- Your current page with windowSize is too close to first page link turn off ---> | |
<cfif loc.loopfrom lt arguments.windowsize+1> | |
<cfset loc.showAnchorDividerLeft = "No"> | |
</cfif> | |
<cfset loc.loopto = loc.paginationData.currentpage + arguments.windowsize> | |
<cfif loc.loopto gt loc.paginationData.totalPages> | |
<cfset loc.loopto = "#loc.paginationData.totalPages-1#"> | |
</cfif> | |
<!--- Your current page with windowSize is too close to last page link turn off ---> | |
<cfif loc.paginationData.totalPages-loc.loopto lt 2> | |
<cfset loc.showAnchorDividerRight = "No"> | |
</cfif> | |
<!--- Build add some linkto parameters to loc.linktoStruct---> | |
<cfset loc.linktoStruct.class="page-link"> | |
<cfif Len(arguments.route)> | |
<cfset loc.linktoStruct.route="#arguments.route#"> | |
</cfif> | |
<cfif Len(arguments.controller)> | |
<cfset loc.linktoStruct.controller="#arguments.controllere#"> | |
</cfif> | |
<cfif Len(arguments.action)> | |
<cfset loc.linktoStruct.action="#arguments.action#"> | |
</cfif> | |
<cfif Len(arguments.key)> | |
<cfset loc.linktoStruct.key="#arguments.key#"> | |
</cfif> | |
<!--- Build Bootstrap 4 Pagination HTML ---> | |
<cfsavecontent variable="result"> | |
<nav aria-label="Pagination"> | |
<ul class="pagination pagination-sm"> | |
<!--- Previous Page ---> | |
<cfif loc.paginationData.currentPage neq 1> | |
<li class="page-item"> | |
<cfoutput> | |
<a class="page-link" href="?page=#loc.paginationData.currentpage-1#<cfif Len(arguments.params)>&#arguments.params#</cfif>" aria-label="Previous"> | |
<span aria-hidden="true">«</span> | |
<span class="sr-only">Previous</span> | |
</a> | |
</cfoutput> | |
</li> | |
</cfif> | |
<!--- END Previous Page ---> | |
<!--- first page number link ---> | |
<cfset loc.linktoStruct.text = 1> | |
<cfset loc.linktoStruct.params="page=1&#arguments.params#"> | |
<cfoutput> | |
<li class="page-item<cfif arguments.activepage eq 1> active</cfif>">#linkTo(argumentCollection = loc.linktoStruct)#</li> | |
</cfoutput> | |
<!--- END first page number link ---> | |
<!--- anchorDivider (the ...)---> | |
<cfif loc.showAnchorDividerLeft eq 'Yes'> | |
<cfoutput> | |
<li class="page-item"><a href="?page=#loc.loopfrom-1#" class="page-link">...</a></li> | |
</cfoutput> | |
</cfif> | |
<!--- Page numbers in between first/last pages based on window size ---> | |
<cfloop from="#loc.loopfrom#" to="#loc.loopto#" index="i"> | |
<cfset loc.linktoStruct.text = "#i#"> | |
<cfset loc.linktoStruct.params="page=#i#&#arguments.params#"> | |
<cfif arguments.activepage eq i><cfset loc.li_activeClass = " active"></cfif> | |
<cfoutput> | |
<li class="page-item#loc.li_activeClass#">#linkTo(argumentCollection = loc.linktoStruct)#</li> | |
</cfoutput> | |
<cfset loc.li_activeClass = ""> | |
</cfloop> | |
<!--- END Pages in between ---> | |
<!--- anchorDivider (the ...---> | |
<cfif loc.showAnchorDividerRight eq 'Yes'> | |
<cfoutput> | |
<li class="page-item"><a href="?page=#loc.loopto+1#" class="page-link">...</a></li> | |
</cfoutput> | |
</cfif> | |
<!--- last page number link ---> | |
<cfif loc.loopto neq loc.paginationData.totalPages> | |
<cfset loc.linktoStruct.text = loc.paginationData.totalPages> | |
<cfset loc.linktoStruct.params="page=#loc.paginationData.totalPages#&#arguments.params#"> | |
<cfoutput> | |
<li class="page-item<cfif arguments.activepage eq loc.linktoStruct.text> active</cfif>">#linkTo(argumentCollection = loc.linktoStruct)#</li> | |
</cfoutput> | |
</cfif> | |
<!--- END last page number link---> | |
<!--- Next page arrow ---> | |
<cfif loc.paginationData.currentpage neq loc.paginationData.totalPages> | |
<li class="page-item"> | |
<cfoutput> | |
<a class="page-link" href="?page=#loc.paginationData.currentpage+1#<cfif Len(arguments.params)>&#arguments.params#</cfif>" aria-label="Next"> | |
<span aria-hidden="true">»</span> | |
<span class="sr-only">Next</span> | |
</a> | |
</cfoutput> | |
</li> | |
</cfif> | |
<!--- END Next page arrow ---> | |
</ul> | |
</nav> | |
</cfsavecontent> | |
<!--- END Build Bootstrap 4 Pagination HTML ---> | |
<cfreturn result /> | |
</cffunction> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment