Show limited no. of page links in pagination

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!

Edi开发者_Python百科t:- This needs to be achieved on the server side. I am working on C#, however you can pitch in algo in any language.

---

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) {
            $('<a href="javascript:void(0);" class="paginate-link" rel="' + (parseInt(currentPage) - 1) + '">&lt; Previous</a>').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

---

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
        }

---

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
    }

---

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.

---

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');
  }

}