Pagination: What Numbers to Display?

Get Started
1

So I have just about finished hand-coding my first-ever Pagination module. (It was much easier than I thought!!)

But I have one lingering issue…

What Pages should I display in my Navigation Bar??

Here is what I currently have…

Nice & Easy, right?! :slight_smile:

But what should I do if there are even more Pages like here…

Or let’s say there are TONS of Pages…

(**Note: I am NOT using JavaScript, so please leave that out of the discussion!!)

There seems to be a million different ways to do things, and it sure would be helpful to get some feedback and suggestions from you gurus out there.

For my Messages, this issue isn’t that big of a deal, because I am limiting people to 100 Messages per Account, and displaying 10 Messages per Page, so my last two examples above wouldn’t really ever happen.

However, for something like Forums or Product Searches, there could be hundreds of pages, so I need to add additional functionality to my current Pagination module to handle things when there are 20, 30, 100, or 500 pages!!

Here is hoping this last bit won’t be too extra hard?! :frowning:

Sincerely,

Debbie

P.S. It would be helpful to also mention whether you like having “First”, Previous", “Next” and “Last” buttons in addition to the Page #'s themselves!!

2

4-5 numbers seems to be the common pattern, with first/last and/or next/prev as appropriate. If you’re at the beginning or the end of your pattern, it’s your choice how many you actually want to show.

So, something like

1, 2, 3, 4, 5, Next, Last
First, Prev, 3, 4, 5, 6, 7, Next, Last

Looks like here on the forums, the skin shows 1-4, then increases by one until seven numbers are displayed, then keeps the seven pattern until the end. It’s a nice design pattern

1, 2, 3, 4, >, Last >>
1, 2, 3, 4, 5, >, Last >>
1, 2, 3, 4, 5, 6, >, Last >>
1, 2, 3, 4, 5, 6, 7, >, Last >>
<<First, <, 2, 3, 4, 5, 6, 7, 8, >, Last >>
<< First, <, 3, 4, 5, 6, 7, 8, 9, >, Last >>

3

I was leaning towards this style…

(Article: Pagination 101)

Here is my understanding of how this would look and work… (Assume increments of “5”.)

User is on Page #5


|< < 1 2 3 4 [B][U][COLOR="#FF0000"]5[/COLOR][/U][/B] ... 19 20 > >|

User clicks Next button (i.e. “>”), and system displays…


|< < [B][U][COLOR="#FF0000"]6[/COLOR][/U][/B] 7 8 9 10 ... 19 20 > >|

User clicks Next button (i.e. “>”), and system displays…


|< < 6 [B][U][COLOR="#FF0000"]7[/COLOR][/U][/B] 8 9 10 ... 19 20 > >|

Eventually, User is on Page #10


|< < 6 7 8 9 [B][U][COLOR="#FF0000"]10[/COLOR][/U][/B] ... 19 20 > >|

User clicks Next button (i.e. “>”), and system displays…


|< < [B][U][COLOR="#FF0000"]11[/COLOR][/U][/B] 12 13 14 15 ... 19 20 > >|

And so on…

Sincerely,

Debbie

4

There’s an interesting article here about pagination that might help.

5

Are you offering to help me figure out how to program that in PHP? :wink:

Sincerely,

Debbie

6

Don’t ask me how, but I GOT IT!!! :irock:

[ot]Not to brag, BUT…

What is really impressive, is that I coded my entire Pagination Module all by myself without looking at anyone else’s code?! Plus, I coded the Navigation Bar like in Paul’s link in just one evening all by myself!!!

Go Debbie!! :smiley:
[/ot]

Anyways…

Here is a screenshot from Wolf’s Navigation Bar…

And here is my Navigation Bar…

I think mine looks pretty good, although maybe a few tweaks on my CSS might make it even better…

Questions:

1.) How does my Navigation Bar above look?

2.) Do you think adding Boxes around things is good or bad? (In my design, I think it makes things look too busy.)

Here is a “Wolf-esque” version that I was just playing with…

3.) What are you thoughts on underlining the links?

4.) How many items should there be in between the “1, 2 …” and the “… 19, 20”? (I have 5, but maybe 3 would be better?)

5.) Finally, I really love this sophisticated new Navigation Bar, and it will be great for things like Product Listings and Forums. However, for my Mailbox where I only allow Users up to 100 Messages, I am wondering if a simplier design like below would make more sense…


< Prev 1 2 3 4 5 Next>

Sincerely,

Debbie

7

Hi Debbie,

Well done that looks fine to me.:slight_smile:

I think I prefer it without the boxes around as it fits more in with your design but I’m not sure I like the underlines (even though they do match your design :)). I just think they clutter the pagination a little and it should be obvious that these are links.

I think the number of items shown depends on the space available and the amount of records that need to be waded through. It can get boring scrolling though only 2 or three items at a time and I would think 5 is about right for your page.

8

Thank you! :slight_smile:

Okay, taking your advice in mind, here is a quick walk-through…

Well, the beauty of my solution is that all I have to do is change a Constant in my Config File and I can simplify the Navigation Display like this…

So I think that gives me LOTS of flexibility wherever I need to use this new “widget”!! :slight_smile:

Oh, and here is what the Page Hover looks like…

[b]So, what do you think, Paul?

Does it look better?[/b]

(BTW, do you prefer Blue or Black font??) :-/

I think things look pretty good for my first-ever attempt at hand-coding a Pagination Module!!

The only other thing that would make it better is greying out the “< Prev” and “Next >” buttons when you get to the ends, but my code makes sure things don’t blow up in those cases, and the cosmetics can wait if I don’t have time.

Sincerely,

Debbie

9

You’ve done a very good job there and you should be proud. (I think its about time you started answering some questions as you’ve obviously learned a lot.:slight_smile: )

(BTW, do you prefer Blue or Black font??) :-/

I think the blue makes it clear they are links and would be my choice.

The only other thing that would make it better is greying out the “< Prev” and “Next >” buttons when you get to the ends,

Yes that would be a nice finishing touch.

10

Thank you.

Coming from you, Paul, that means a lot to me!! :o

I don’t think I’m smart enough or qualified enough to help much on SP. (Most times I come on here, I still feel like a newbie…)

But, yes, I do like helping others when it seems like there is something I can contribute. (I’m probably more useful in the local soup kitchen!)

My thought too.

Yep.

Thanks as always!!! :tup:

Sincerely,

Debbie