├── style.css ├── README.md ├── scripts.js └── index.html /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 50px; 3 | } 4 | 5 | .starter-template { 6 | padding: 40px 15px; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## jQuery Pagination 2 | 3 | This is a simple demonstration on how to implement pagination using jQuery. 4 | 5 | A working example can be found [here](https://codepen.io/gugui3z24/pen/VzZzgr). Additionally, a YouTube tutorial video illustrating how to create this application from scratch can be found [here](https://youtu.be/Xznn-ggD0GU). 6 | 7 | ## Description 8 | 9 | This application was created to demonstrate how to utilize jQuery to implement pagination in order to limit items displayed on each page (without the use of any plugins). 10 | 11 | ## Installation 12 | 13 | - Open the HTML file index.html in your browser. 14 | 15 | ## Contributors 16 | 17 | David Acosta. 18 | 19 | ## License 20 | 21 | No license. 22 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var numberOfItems = $('#page .list-group').length; // Get total number of the items that should be paginated 4 | var limitPerPage = 4; // Limit of items per each page 5 | $('#page .list-group:gt(' + (limitPerPage - 1) + ')').hide(); // Hide all items over page limits (e.g., 5th item, 6th item, etc.) 6 | var totalPages = Math.round(numberOfItems / limitPerPage); // Get number of pages 7 | $(".pagination").append("
  • " + 1 + "
    • "); // Add first page marker 8 | 9 | // Loop to insert page number for each sets of items equal to page limit (e.g., limit of 4 with 20 total items = insert 5 pages) 10 | for (var i = 2; i <= totalPages; i++) { 11 | $(".pagination").append("
  • " + i + "
    • "); // Insert page number into pagination tabs 12 | } 13 | 14 | // Add next button after all the page numbers 15 | $(".pagination").append("
    • "); 16 | 17 | // Function that displays new items based on page number that was clicked 18 | $(".pagination li.current-page").on("click", function() { 19 | // Check if page number that was clicked on is the current page that is being displayed 20 | if ($(this).hasClass('active')) { 21 | return false; // Return false (i.e., nothing to do, since user clicked on the page number that is already being displayed) 22 | } else { 23 | var currentPage = $(this).index(); // Get the current page number 24 | $(".pagination li").removeClass('active'); // Remove the 'active' class status from the page that is currently being displayed 25 | $(this).addClass('active'); // Add the 'active' class status to the page that was clicked on 26 | $("#page .list-group").hide(); // Hide all items in loop, this case, all the list groups 27 | var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page number that was clicked on 28 | 29 | // Loop through total items, selecting a new set of items based on page number 30 | for (var i = grandTotal - limitPerPage; i < grandTotal; i++) { 31 | $("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected 32 | } 33 | } 34 | 35 | }); 36 | 37 | // Function to navigate to the next page when users click on the next-page id (next page button) 38 | $("#next-page").on("click", function() { 39 | var currentPage = $(".pagination li.active").index(); // Identify the current active page 40 | // Check to make sure that navigating to the next page will not exceed the total number of pages 41 | if (currentPage === totalPages) { 42 | return false; // Return false (i.e., cannot navigate any further, since it would exceed the maximum number of pages) 43 | } else { 44 | currentPage++; // Increment the page by one 45 | $(".pagination li").removeClass('active'); // Remove the 'active' class status from the current page 46 | $("#page .list-group").hide(); // Hide all items in the pagination loop 47 | var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page that was selected 48 | 49 | // Loop through total items, selecting a new set of items based on page number 50 | for (var i = grandTotal - limitPerPage; i < grandTotal; i++) { 51 | $("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected 52 | } 53 | 54 | $(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass('active'); // Make new page number the 'active' page 55 | } 56 | }); 57 | 58 | // Function to navigate to the previous page when users click on the previous-page id (previous page button) 59 | $("#previous-page").on("click", function() { 60 | var currentPage = $(".pagination li.active").index(); // Identify the current active page 61 | // Check to make sure that users is not on page 1 and attempting to navigating to a previous page 62 | if (currentPage === 1) { 63 | return false; // Return false (i.e., cannot navigate to a previous page because the current page is page 1) 64 | } else { 65 | currentPage--; // Decrement page by one 66 | $(".pagination li").removeClass('active'); // Remove the 'activate' status class from the previous active page number 67 | $("#page .list-group").hide(); // Hide all items in the pagination loop 68 | var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page that was selected 69 | 70 | // Loop through total items, selecting a new set of items based on page number 71 | for (var i = grandTotal - limitPerPage; i < grandTotal; i++) { 72 | $("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected 73 | } 74 | 75 | $(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass('active'); // Make new page number the 'active' page 76 | } 77 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | jQuery Pagination Tutorial 15 | 16 | 17 | 18 | 19 | 20 | 33 | 34 |
    35 | 36 |
    37 |

    jQuery Pagination

    38 |

    By David Acosta

    39 |
    40 | 41 | 46 | 47 |
    48 |
    49 | 50 |

    Title 1

    51 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    52 |     53 |
    54 | 55 |
    56 | 57 |

    Title 2

    58 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    59 |     60 |
    61 | 62 |
    63 | 64 |

    Title 3

    65 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    66 |     67 |
    68 | 69 |
    70 | 71 |

    Title 4

    72 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    73 |     74 |
    75 | 76 |
    77 | 78 |

    Title 5

    79 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    80 |     81 |
    82 | 83 |
    84 | 85 |

    Title 6

    86 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    87 |     88 |
    89 | 90 |
    91 | 92 |

    Title 7

    93 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    94 |     95 |
    96 | 97 |
    98 | 99 |

    Title 8

    100 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    101 |     102 |
    103 | 104 |
    105 | 106 |

    Title 9

    107 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    108 |     109 |
    110 | 111 |
    112 | 113 |

    Title 10

    114 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    115 |     116 |
    117 | 118 |
    119 | 120 |

    Title 11

    121 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    122 |     123 |
    124 |
    125 | 126 |
    127 | 128 | 129 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | --------------------------------------------------------------------------------