-
Notifications
You must be signed in to change notification settings - Fork 11
/
scripts.js
77 lines (65 loc) · 4.58 KB
/
scripts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
'use strict';
var numberOfItems = $('#page .list-group').length; // Get total number of the items that should be paginated
var limitPerPage = 4; // Limit of items per each page
$('#page .list-group:gt(' + (limitPerPage - 1) + ')').hide(); // Hide all items over page limits (e.g., 5th item, 6th item, etc.)
var totalPages = Math.round(numberOfItems / limitPerPage); // Get number of pages
$(".pagination").append("<li class='current-page active'><a href='javascript:void(0)'>" + 1 + "</a></li>"); // Add first page marker
// 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)
for (var i = 2; i <= totalPages; i++) {
$(".pagination").append("<li class='current-page'><a href='javascript:void(0)'>" + i + "</a></li>"); // Insert page number into pagination tabs
}
// Add next button after all the page numbers
$(".pagination").append("<li id='next-page'><a href='javascript:void(0)' aria-label=Next><span aria-hidden=true>»</span></a></li>");
// Function that displays new items based on page number that was clicked
$(".pagination li.current-page").on("click", function() {
// Check if page number that was clicked on is the current page that is being displayed
if ($(this).hasClass('active')) {
return false; // Return false (i.e., nothing to do, since user clicked on the page number that is already being displayed)
} else {
var currentPage = $(this).index(); // Get the current page number
$(".pagination li").removeClass('active'); // Remove the 'active' class status from the page that is currently being displayed
$(this).addClass('active'); // Add the 'active' class status to the page that was clicked on
$("#page .list-group").hide(); // Hide all items in loop, this case, all the list groups
var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page number that was clicked on
// Loop through total items, selecting a new set of items based on page number
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected
}
}
});
// Function to navigate to the next page when users click on the next-page id (next page button)
$("#next-page").on("click", function() {
var currentPage = $(".pagination li.active").index(); // Identify the current active page
// Check to make sure that navigating to the next page will not exceed the total number of pages
if (currentPage === totalPages) {
return false; // Return false (i.e., cannot navigate any further, since it would exceed the maximum number of pages)
} else {
currentPage++; // Increment the page by one
$(".pagination li").removeClass('active'); // Remove the 'active' class status from the current page
$("#page .list-group").hide(); // Hide all items in the pagination loop
var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page that was selected
// Loop through total items, selecting a new set of items based on page number
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected
}
$(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass('active'); // Make new page number the 'active' page
}
});
// Function to navigate to the previous page when users click on the previous-page id (previous page button)
$("#previous-page").on("click", function() {
var currentPage = $(".pagination li.active").index(); // Identify the current active page
// Check to make sure that users is not on page 1 and attempting to navigating to a previous page
if (currentPage === 1) {
return false; // Return false (i.e., cannot navigate to a previous page because the current page is page 1)
} else {
currentPage--; // Decrement page by one
$(".pagination li").removeClass('active'); // Remove the 'activate' status class from the previous active page number
$("#page .list-group").hide(); // Hide all items in the pagination loop
var grandTotal = limitPerPage * currentPage; // Get the total number of items up to the page that was selected
// Loop through total items, selecting a new set of items based on page number
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#page .list-group:eq(" + i + ")").show(); // Show items from the new page that was selected
}
$(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass('active'); // Make new page number the 'active' page
}
});