Results 1 to 3 of 3

Thread: Ajax Pagination Script-Building constant pagination

  1. #1
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Ajax Pagination Script-Building constant pagination

    1) Script Title: Ajax Pagination Script

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...nate/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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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):

    Code:
    <script type="text/javascript">
    
    var ajaxpaginateText=["previous", "next", "one", "two", "three", "four"]
    
    </script>
    Then, replace the default "buildpagination" function:
    Code:
    	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:

    Code:
    	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
    			}
    		}
    	},

  3. #3
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Thank you - appreciated

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •