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>


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.