Show limited no. of page links in pagination - html

Question

I want to display a limited no. of page links, say 5 out of 10 links, and was wondering is there any known or tried and tested method to achieve this.
so lets say user can right now see following links
previous, 1(selected), 2, 3, 4, 5... next
user clicks on, say 4, now he sees
previous... 3, 4(selected), 5, 6, 7...next
now he clicks on 7
previous... 6, 7(selected), 8, 9, 10...next
Now I believe this to be something very common in pagination programming. So is there any known algo to do this. I am feeling too lazy to cookup my own!
Edit:- This needs to be achieved on the server side. I am working on C#, however you can pitch in algo in any language.

Answer 1

The problem with some of the answers, especially with Tyrone's is that it only updates the navigation when the remainder is 0, if you want it to update on every click then the following is much better:
var start,
end,
pagesCutOff = 5,
ceiling = Math.ceil(pagesCutOff / 2),
floor = Math.floor(pagesCutOff / 2);
if(numPages < pagesCutOff) {
start = 0;
end = numPages;
} else if(currentPage >= 1 && currentPage <= ceiling) {
start = 0;
end = pagesCutOff;
} else if((currentPage + floor) >= numPages) {
start = (numPages - pagesCutOff);
end = numPages;
} else {
start = (currentPage - ceiling);
end = (currentPage + floor);
}
Obviously you send through the currentPage and numPages yourself to the function, this will keep the current page centered in the pagination list, the number of buttons shown should be an odd number so that the selected page can be "in the middle" of the list.
You can then do the following loop:
for (var i = start; i < end; i++) {
//Your code here
}
If you want to add a next and previous button to this then simply do something like:
if(currentPage !== 1) {
$('< Previous').appendTo(navElement);
}
Where navElement is a jQuery object of where you want to append the list to like: $('#pagination-nav');
Hope this helps someone!
Cheers

Answer 2

Tested this and it works even though it could be a little more graceful. I am using C# here, but the logic for any language should be the same. If you come up with a better solution please post. If you have any questions please post to. I have commented the code to help better explain what is going on.
//Get the current page we are on
int start = currentPage;
int end = currentPage;
//If the page cannot be devised by 5 enter the loop
if ((start % 5 != 0) && (end % 5 != 0))
{
//Get the next nearest page that is divisible by 5
while ((end % 5) != 0)
{
end++;
}
//Get the previous nearest page that is divisible by 5
while ((start % 5) != 0)
{
start--;
}
}
//The page is divisible by 5 so get the next 5 pages in the pagination
else
{
end += 5;
}
//We are on the first page
if (start == 0)
{
start++;
end++;
}
//We are on the last page
if (end == lastpage)
{
end = lastpage;
}
//Post your pagination links below
for (int i = start; i < end; i++)
{
//Your code here
}

Answer 3

The problem with some of the answers, especially with Tyrone's is that it only updates the navigation when the remainder is 0, if you want it to update on every click then the following is much better:
//Get the current page we are on
int start = currentPage;
int end = currentPage;
//If the page cannot be devised by 5 enter the loop
if ((start % 5 != 0) && (end % 5 != 0))
{
//Get the next nearest page that is divisible by 5
while ((end % 5) != 0)
{
end++;
}
//Get the previous nearest page that is divisible by 5
while ((start % 5) != 0)
{
start--;
}
}
//The page is divisible by 5 so get the next 5 pages in the pagination
else
{
end += 5;
}
//We are on the first page
if (start == 0)
{
start++;
end++;
}
//We are on the last page
if (end == lastpage)
{
end = lastpage;
}
//Post your pagination links below
for (int i = start; i < end; i++)
{
//Your code here
}

Answer 4

You can't do this with just HTML. You'll have to use either PHP or javascript (or some other scripting language) to generate the links.

Answer 5

I had to limit no of page links on the pager to 3 on small (mobile) devices. I used following code to achieve it.
//If it is full page, pager
//Assume all page links are visible
//Get the actual pages links count
var noOfPages = $('ul.pagination li.pager__item').not('.pager__item--first, .pager__item--previous,.pager__item--last, .pager__item--next').length;
var pages = [];
if (noOfPages > 3) {
var activePage = 0;
var index = 0;
$('ul.pagination li.pager__item').not('.pager__item--first, .pager__item--previous,.pager__item--last, .pager__item--next').each(function() {
//Get the active page no.
if ($(this).hasClass('current')) {
activePage = index;
}
//Hide page link
$(this).css('display', 'none');
pages.push($(this));
index++;
});
var start;
var end;
//We are at page 1 (i.e page=0)
if(activePage == 0) {
start = 0;
end = 2;
}
// Wer are at last page
else if(activePage == noOfPages - 1) {
start = activePage - 2;
end = activePage;
}
else {
start = activePage - 1;
end = activePage + 1;
}
for (var i = start; i <= end; i++) {
pages[i].css('display', 'inline-block');
}
}