Posted By

linusx on 04/14/10


Tagged

javascript pagination adjacent


Versions (?)

Javascript Pagination With Adjacents


 / Published in: JavaScript
 

URL: http://dev.kickapps.com/foodnwine/getUserFavorites.php?as=117547&u=22128246&p=1&ps=20

This will make links that look like this: previous 1 2 ... 33 34 35 36 37 38 39 ... 264 265 next You would just need to change the link in each of the numbers.

variables: current page total items in list how many items per page are being displayed

Example: var pagination = paginate(4, 2633, 10)

  1. function paginate(page, total_items, limit){
  2. // How many adjacent pages should be shown on each side?
  3. adjacents = 3;
  4.  
  5. start = (page) ? (start = (page - 1) * limit) : 0; //first item to display on this page
  6.  
  7. /* Setup page vars for display. */
  8. if (page == 0) { page = 1 }; //if no page var is given, default to 1.
  9. prev = page - 1; //previous page is page - 1
  10. next = page + 1; //next page is page + 1
  11. lastpage = Math.ceil(total_items / limit); //lastpage is = total pages / items per page, rounded up.
  12. lpm1 = lastpage - 1; //last page minus 1
  13.  
  14. pagination = "<ul>";
  15. if(lastpage > 1) {
  16. if (page > 1) { pagination += "<li><a href=\"#\">&laquo; previous</a></li>"; }
  17.  
  18. //not enough pages to bother breaking it up
  19. if (lastpage < 7 + (adjacents * 2)) {
  20. for (counter = 1; counter <= lastpage; counter++) {
  21. if (counter == page) {
  22. $pagination += "<li class=\"current\">" + counter + "</li>";
  23. } else {
  24. pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
  25. }
  26. }
  27.  
  28. //enough pages to hide some
  29. } else if(lastpage > 5 + (adjacents * 2)) {
  30.  
  31. //close to beginning; only hide later pages
  32. if(page < 1 + (adjacents * 2)) {
  33. for (counter = 1; counter < 4 + (adjacents * 2); counter++) {
  34. if (counter == page) {
  35. pagination += "<li class=\"current\">" + counter + "</li>";
  36. } else {
  37. pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
  38. }
  39. }
  40. pagination += "<li>...</li>";
  41. pagination += "<li><a href=\"javascript:getFavorites(" + lpm1 + ", " + limit + ");\">" + lpm1 + "</a>";
  42. pagination += "<li><a href=\"javascript:getFavorites(" + lastpage + ", " + limit + ");\">" + lastpage + "</a>";
  43. } else if(lastpage - (adjacents * 2) > page && page > (adjacents * 2)) {
  44. //in middle; hide some front and some back
  45. pagination += "<li><a href=\"javascript:getFavorites(1, " + limit + ");\">1</a></li>";
  46. pagination += "<li><a href=\"javascript:getFavorites(2, " + limit + ");\">2</a></li>";
  47. pagination += "<li>...</li>";
  48. for (counter = page - adjacents; counter <= page + adjacents; counter++) {
  49. if (counter == page)
  50. pagination += "<li class=\"current\">" + counter + "</li>";
  51. else
  52. pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
  53. }
  54. pagination += "<li>...</li>";
  55. pagination += "<li><a href=\"javascript:getFavorites(" + lpm1 + ", " + limit + ");\">" + lpm1 + "</a></li>";
  56. pagination += "<li><a href=\"javascript:getFavorites(" + lastpage + ", " + limit + ");\">" + lastpage + "</a></li>";
  57. } else {
  58. //close to end; only hide early pages
  59. pagination += "<li><a href=\"javascript:getFavorites(1, " + limit + ");\">1</a></li>";
  60. pagination += "<li><a href=\"javascript:getFavorites(2, " + limit + ");\">2</a></li>";
  61. pagination += "<li>...</li>";
  62.  
  63. for (counter = lastpage - (2 + (adjacents * 2)); counter <= lastpage; counter++) {
  64. if (counter == page) {
  65. pagination += "<li class=\"current\">" + counter + "</li>";
  66. } else {
  67. pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
  68. }
  69. }
  70. }
  71. }
  72.  
  73. //next button
  74. if (page < counter - 1) { pagination += "<li><a href=\"javascript:getFavorites(" + next + ", " + limit + ");\">next &raquo;</a></li>"; }
  75. }
  76.  
  77. pagination += "</ul>\n";
  78. return pagination;
  79. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: rhay141629 on July 22, 2011

How to use this script?

You need to login to post a comment.