Posted By

flicity on 07/20/10


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

goliatone
Priestd09


Create pagination from a list of items


 / Published in: jQuery
 

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

Creates pagination - need to specify container element, list items and number to display. Content should be marked up as follows:

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  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. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Ashwin on October 20, 2018

Only platform this is that allow me to know where are saved passwords in microsoft edge before this information i was searching here and their or asking with my friends how to get the right answer for this or use to save my passwords. Thank you very much.

You need to login to post a comment.