PDA

View Full Version : Ajax Pagination Script-Building constant pagination



eth
07-22-2008, 11:00 PM
1) Script Title: Ajax Pagination Script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxpaginate/index.htm

3) Describe problem:
I would like to make 5 constant pagination with my own words and href instead of those; previous-1-2-3-...-next links. What changes should I make in ajaxpagination.js instead of those:

if (this.pageinfo.page.length==1)
var paginateHTML="Page 1 of 1" //Pagination HTML to show when there's only 1 page (no pagination needed)
else{ //construct pagimation interface
var paginateHTML='<div class="pagination"><ul>\n'
paginateHTML+='<li><a href="#previous" rel="'+(selectedpage-1)+'">BİLGİLER</a></li>\n'
for (var i=0; i<this.pageinfo.page.length; i++){
paginateHTML+='<li><a href="#page'+(i+1)+'" rel="'+i+'">'+(i+1)+'</a></li>\n'
}
paginateHTML+='<li><a href="#next" rel="'+(selectedpage+1)+'">next </a></li>\n'
paginateHTML+='</ul></div>'
}// end construction

coding of this script?

Thanking in advance

ddadmin
07-23-2008, 06:18 AM
If you mean customize the pagination links' text, sure. First, at the top of your page, define an array that contains the new text (1st and 2nd slot should correspond to "prev" and "next" links' text):


<script type="text/javascript">

var ajaxpaginateText=["previous", "next", "one", "two", "three", "four"]

</script>

Then, replace the default "buildpagination" function:


buildpagination:function(selectedpage){
if (this.pageinfo.page.length==1)
var paginateHTML="Page 1 of 1" //Pagination HTML to show when there's only 1 page (no pagination needed)
else{ //construct pagimation interface
var paginateHTML='<div class="pagination"><ul>\n'
paginateHTML+='<li><a href="#previous" rel="'+(selectedpage-1)+'"></a></li>\n'
for (var i=0; i<this.pageinfo.page.length; i++){
paginateHTML+='<li><a href="#page'+(i+1)+'" rel="'+i+'">'+(i+1)+'</a></li>\n'
}
paginateHTML+='<li><a href="#next" rel="'+(selectedpage+1)+'">next </a></li>\n'
paginateHTML+='</ul></div>'
}// end construction
for (var i=0; i<this.paginateIds.length; i++){ //loop through # of pagination DIVs specified
var paginatediv=document.getElementById(this.paginateIds[i]) //reference pagination DIV
paginatediv._currentpage=selectedpage //remember current page selected (which will become previous page selected after each page turn)
paginatediv.innerHTML=paginateHTML
var pageinstance=this
paginatediv.onclick=function(e){
var targetobj=window.event? window.event.srcElement : e.target
if (targetobj.tagName=="A" && targetobj.getAttribute("rel")!=""){
if (!/disabled/i.test(targetobj.className)){ //if this pagination link isn't disabled (CSS classname "disabled")
pageinstance.selectpage(parseInt(targetobj.getAttribute("rel")))
}
}
return false
}
}
},

with the below modified version instead:


buildpagination:function(selectedpage){
if (this.pageinfo.page.length==1)
var paginateHTML="Page 1 of 1" //Pagination HTML to show when there's only 1 page (no pagination needed)
else{ //construct pagimation interface
var paginateHTML='<div class="pagination"><ul>\n'
paginateHTML+='<li><a href="#previous" rel="'+(selectedpage-1)+'">'+ajaxpaginateText[0]+'</a></li>\n'
for (var i=0; i<this.pageinfo.page.length; i++){
paginateHTML+='<li><a href="#page'+(i+1)+'" rel="'+i+'">'+ajaxpaginateText[i+2]+'</a></li>\n'
}
paginateHTML+='<li><a href="#next" rel="'+(selectedpage+1)+'">'+ajaxpaginateText[1]+'</a></li>\n'
paginateHTML+='</ul></div>'
}// end construction
for (var i=0; i<this.paginateIds.length; i++){ //loop through # of pagination DIVs specified
var paginatediv=document.getElementById(this.paginateIds[i]) //reference pagination DIV
paginatediv._currentpage=selectedpage //remember current page selected (which will become previous page selected after each page turn)
paginatediv.innerHTML=paginateHTML
var pageinstance=this
paginatediv.onclick=function(e){
var targetobj=window.event? window.event.srcElement : e.target
if (targetobj.tagName=="A" && targetobj.getAttribute("rel")!=""){
if (!/disabled/i.test(targetobj.className)){ //if this pagination link isn't disabled (CSS classname "disabled")
pageinstance.selectpage(parseInt(targetobj.getAttribute("rel")))
}
}
return false
}
}
},

eth
07-23-2008, 10:36 AM
Dear DDAdmin,
You are fantastic in helping our special demands.

Thank you very very much for that much quick help. This forum makes me a fan of dynamic Drive.