JavaScript/Pagination

This lesson teaches how to implement pagination in JavaScript. This method supports multiple pagination containers on one page. If it is too difficult to understand, try JavaScript/Pagination (simple) with one pagination container first.

The script works by finding all pagination tabs and containers on the page. Then, click events are added to the tab bars that correspond with the pagination containers in the order they are on the page.

When a tab is selected, the tab is highlighted as bold, and the page inside the pagination container it corresponds to is displayed through the display:block inline CSS property, while the other pages are hidden through display:none.

Since the code automatically detects all pagination tabs and containers, new ones can be added without changing the script.

Pagination tabs

These can be located anywhere on the page. Their order is automatically detected by the script.

• Page 1
|
• Page 2
|
• Page 3
|
• Page 4
|
• Page 5

• Page 1
|
• Page 2
|
• Page 3
|
• Page 4
|
• Page 5

Pagination container 1

Text of page 1

Text of page 2

Text of page 3

Text of page 4

Text of page 5

Pagination container 2

Text of page 1

Text of page 2

Text of page 3

Text of page 4

Text of page 5

Script

// pagination script

// variable scopes and initialization
// declaring variables to avoid reference errors that would stop the script
var pagination_tabs = {}; var pages = {}; // empty objects
var pagination_container_number = 0; // intial value

// main function
function switchToPage(page_number,pagination_container_number) {
	// select first container if none is specified
	if ( isNaN(pagination_container_number) ) pagination_container_number=0;
	
	// Putting tabs and pages into variables for simplification
	pagination_tabs = document.getElementsByClassName("pagination_tabs")[pagination_container_number].getElementsByTagName("li");
	pages = document.getElementsByClassName("pagination_container")[pagination_container_number].getElementsByTagName("div");

	pagination_tabs[page_number].style.fontWeight="bold"; // highlight selected tab
	pages[page_number].style.display="block"; // show page
	
	for (
	count=0; // Start counter
	count < pagination_tabs.length; // Repeat until counter reaches number of page tabs
	count++ // Count up by one each time. Equivalent to count+=1 and count=count+1 .
	) 	{  // run this code as many times as there are pages in the selected container
		if (count!=page_number) { // apply to all pages except the selected one
			pagination_tabs[count].style.fontWeight="normal"; // unhighlight selected tab
			pages[count].style.display="none"; // hide page
		}
	}
}

if 	( document.getElementsByClassName("pagination_tabs").length ) /* checks if the element exists to avoid errors */ {
	for (count_pagination_containers=0; // start counter
		 // repeat until containers are counted
		 count_pagination_containers < document.getElementsByClassName("pagination_container").length;
		 count_pagination_containers++ // count up
		) {
		// walk through all pagination containers
		pagination_tabs = document.getElementsByClassName("pagination_tabs")[count_pagination_containers].getElementsByTagName("li");
		
		// Adding click listeners to the tabs
		for (count_pages=0; count_pages<pagination_tabs.length; count_pages++) { // walk through all pages
			pagination_tabs[count_pages].setAttribute("onclick","switchToPage("+count_pages+","+count_pagination_containers+");");
		}
		
		switchToPage(0,count_pagination_containers); // initialize first page of each container
	}
} else { console.debug("No pagination containers found."); }

See also

• JavaScript/Pagination (simple)
• CSS/Pagination