Advanced Search

Javascript Pagination With Adjacents

/ Published in: JavaScript
Save to your folder(s)
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)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.