Posted By

flicity on 07/20/10

Tagged

Versions (?)

Last Edited at 07/20/10 12:10am

Statistics

Viewed 953 times

Favorited by 1 user(s)

Related snippets

Create pagination from a list of items

/ Published in: jQuery

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>

Highlighted TextExpand

function pagination(el, items, numItemsToShow){
	
  	//number of items in list  
	var numItems= $(items).length;
	 //calculate the number of pages 
	var numPages = Math.ceil(numItems/numItemsToShow); 
	
	//hide all elements 
	$(items).hide();
	//and show the first n (show_per_page) elements  
	$(items).slice(0, numItemsToShow).show();	
	
	//build pagination
	var navigation_html = '<ul class="pagination">Page: ';  
   	var current_link = 0;  
  	while(numPages > current_link){  
  		navigation_html += '<li><a href="">'+ (current_link + 1) +'</a></li>';  
 		current_link++;  
  	}  
	navigation_html += '</ul>';  
 
 	//insert pagination
	if (numItems > numItemsToShow){
		$(el).after(navigation_html);  
	}
	
	//add active_page class to the first page link  
	$('ul.pagination li:first-child a').addClass('selected');  
	
	//pagination behaviour
	$("ul.pagination li a").click (function(){
		//identify current pagination if multiple on page
		var thisPag = $(this).parents("ul");
		//identify current container
		var thisList = $(thisPag).prev("ul");
		//identify current list items
		items = $(thisList).children("li");
		$(thisPag).find("li a").removeClass('selected');
		$(this).addClass('selected');
		var thisPage = parseInt($(this).text());
		var beginItem = (thisPage -1) * numItemsToShow;
		$(items).hide();
		//and show the first n (show_per_page) elements  
		$(items).slice(beginItem, beginItem + numItemsToShow).css('display', 'block'); 
		return false;
	})
	
}

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.