Advanced Search

Create pagination from a list of items

/ Published in: jQuery
Save to your folder(s)
Creates pagination - need to specify container element, list items and number to display. Content should be marked up as follows:

<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function pagination(el, items, numItemsToShow){
  2.  
  3.   	//number of items in list  
  4. 	var numItems= $(items).length;
  5. 	 //calculate the number of pages 
  6. 	var numPages = Math.ceil(numItems/numItemsToShow); 
  7.  
  8. 	//hide all elements 
  9. 	$(items).hide();
  10. 	//and show the first n (show_per_page) elements  
  11. 	$(items).slice(0, numItemsToShow).show();	
  12.  
  13. 	//build pagination
  14. 	var navigation_html = '<ul class="pagination">Page: ';  
  15.    	var current_link = 0;  
  16.   	while(numPages > current_link){  
  17.   		navigation_html += '<li><a href="">'+ (current_link + 1) +'</a></li>';  
  18.  		current_link++;  
  19.   	}  
  20. 	navigation_html += '</ul>';  
  21.  
  22.  	//insert pagination
  23. 	if (numItems > numItemsToShow){
  24. 		$(el).after(navigation_html);  
  25. 	}
  26.  
  27. 	//add active_page class to the first page link  
  28. 	$('ul.pagination li:first-child a').addClass('selected');  
  29.  
  30. 	//pagination behaviour
  31. 	$("ul.pagination li a").click (function(){
  32. 		//identify current pagination if multiple on page
  33. 		var thisPag = $(this).parents("ul");
  34. 		//identify current container
  35. 		var thisList = $(thisPag).prev("ul");
  36. 		//identify current list items
  37. 		items = $(thisList).children("li");
  38. 		$(thisPag).find("li a").removeClass('selected');
  39. 		$(this).addClass('selected');
  40. 		var thisPage = parseInt($(this).text());
  41. 		var beginItem = (thisPage -1) * numItemsToShow;
  42. 		$(items).hide();
  43. 		//and show the first n (show_per_page) elements  
  44. 		$(items).slice(beginItem, beginItem + numItemsToShow).css('display', 'block'); 
  45. 		return false;
  46. 	})
  47.  
  48. }

URL: http://web.enavu.com/tutorials/making-a-jquery-pagination-system/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.