Advanced Search

Return to Snippet

Revision: 29019
at July 20, 2010 00:10 by flicity
Initial Code 
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;
	})
	
}
Initial URL 
http://web.enavu.com/tutorials/making-a-jquery-pagination-system/
Initial Description 
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>
Initial Title 
Create pagination from a list of items
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery