PDA

View Full Version : Ajax Pagination script v1.2.2 - make a to z?



babyewok
12-03-2008, 01:47 PM
1) Script Title: Ajax Pagination script v1.2.2

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

3) Describe problem: How to make links A to Z instad of 1,2,3, etc

Hi,

I am looking for a pagination script to list pages as A to Z (whole alphabet showing), with inactive letters for pages with no content.

Most pagination scripts keep all the info on one page so I like the way that this one dynamically links to a separate page, loading it only when needed. Is there some way this script can be modified for an a-z listing? I think that it is important that unused letters are shown as inactive rather than not showing at all, as it keeps thing nice and tidy.

Any suggestion? Please be gentle with me - javascript isn't my forte!

ddadmin
12-03-2008, 11:44 PM
Try adding the below line in red to the .js file:


ajaxpageclass.ellipse="..." // Ellipse text (no HTML allowed)
ajaxpageclass.alpha="abcdefghijklmnopqrstuvwxyz".split('')

Then find the chunk of code:


for (var i=0; i<this.pageinfo.pages.length; i++){
var ellipses={left: (i==0? this.ellipse : ''), right: (i==this.pageinfo.pages.length-1? this.ellipse : '')} //if this is 1st or last page link, add ellipse next to them, hidden by default
paginateHTML+='<li>'+ellipses.right+'<a href="#page'+(i+1)+'" rel="'+i+'" '+this.pagerangestyle+'>'+(i+1)+'</a>'+ellipses.left+'</li>\n'
}

and replace that with:


for (var i=0; i<this.pageinfo.pages.length; i++){
var ellipses={left: (i==0? this.ellipse : ''), right: (i==this.pageinfo.pages.length-1? this.ellipse : '')} //if this is 1st or last page link, add ellipse next to them, hidden by default
paginateHTML+='<li>'+ellipses.right+'<a href="#page'+(i+1)+'" rel="'+i+'" '+this.pagerangestyle+'>'+ajaxpageclass.alpha[i]+'</a>'+ellipses.left+'</li>\n'
}
for (var i=this.pageinfo.pages.length; i<26; i++){
paginateHTML+='<li>'+ellipses.right+'<a href="#page'+(i+1)+'" class="disabled" rel="'+i+'" '+this.pagerangestyle+'>'+ajaxpageclass.alpha[i]+'</a>'+ellipses.left+'</li>\n'
}

Fixed error

babyewok
12-04-2008, 11:28 AM
Thanks for the prompt reply - I will try that out and let you know how it goes.

babyewok
12-05-2008, 11:41 AM
I have tried out the script change with the demo file. The links now say "undefined" instead of the letter - is there something else I need to do?

ddadmin
12-05-2008, 10:29 PM
Nope, the above changes should work as is. Here is the modified .js file in case you made a mistake.

Fixed error

babyewok
12-06-2008, 11:53 AM
I downloaded the js file you attached and tried that, but still got the same problem. I then thought it might be a browser issue and found that it works in Firefox and Opera, but not IE 7 which is what I was testing it in. In IE7, I just get 'undefined' instead of letters.

Another issue is that even though other letters are shown as inactive links if there are not 26 files, they do not correspond to the actual letter. For example, if I have only pages for a, b, c and m, then instead of links showing just for a, b, c and m, they show as a, b,c and d, with d linking to m (if that makes sense!). I suppose to do that correctly, the generated links would have to somehow be linked to the name of the file (I would just be calling them a.html, b.html.....)

ddadmin
12-06-2008, 08:44 PM
Ops, forgot to test it in IE. I've corrected the error in the inline code and attached .js file.


Another issue is that even though other letters are shown as inactive links if there are not 26 files, they do not correspond to the actual letter

Hmm that could be tricky. You need a generic way to determine which page should match up with which letter, so the script could tap into that method when generating the pagination links. For example, are your pages named "a.htm", "b.htm", etc that can be easily identified as being a particular page?

babyewok
12-08-2008, 11:22 AM
Thanks for the edited file - it works fine in IE now. Yes, I would be just naming the files a.html, b.html, etc I would probably also be putting them in their own directory.

Thank you so much for all your help so far - it is really appreciated

babyewok
01-14-2009, 01:59 PM
Hi - any ideas?

ddadmin
01-15-2009, 11:07 AM
Sorry for the delay. Ok, try the below .js file. It still outputs all 26 alphabet letters as pagination links, but which one is linked depends on which files are set to be shown based on the syntax alphabet+".html". For example:


var bookonflowers={
pages: ["a.html", "e.html", "d.html", "z.html"],
selectedpage: 0 //set page shown by default (0=1st page)
}

Would cause the corresponding 5 links in the pagination links to be hyperlinked as a result, using this .js file.

babyewok
01-15-2009, 12:00 PM
Thanks for the reply. Is that new script working for you? I have tested in IE7, Firefox, Safari for windows & Opera and they all make the four files I put in a, b, c, d regardless of the letter. Firefox shows all the other letters as inactive links (but still only makes a,b,c,d active) while all the others show the other letters as active links that cannot be clicked on, however, when you get to the last file (shown as d despite it being z!) the next button does become inactive.

We seem to be close, but not there yet! This is obviously proving to be a much harder task than it seemed! Unless you managed to get it working for you and I have just missed something out??

--------------EDIT

OK, so firefox seems to almost have it. I had originally put the files in their own directory (files/a.html), so I moved them to the same directory as the script. This made no difference to IE, opera or safari but on Firefox, it actually shows the correct letters as active! (I used the same four as you did in your last post for the test: a, d, e & z) BUT the links for d and z do not work, even though those for a and d do.


--------------EDIT

Sorry about all the edits. On Firefox, although it shows the correct letters, it still puts the pages in the first four links (even though only a and d are active) If you click on a, it shows file a.html, but if you click on d, it shows file z.html. So firefox seems to be doing the same as the other browsers - the only thing it is getting right is the active/inactive links

babyewok
04-24-2009, 07:21 PM
Any ideas? I'd still like to get this working properly