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  inline CSS property, while the other pages are hidden through.

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</li> | <li style="display:inline-block; cursor:pointer;">Page 2</li> | <li style="display:inline-block; cursor:pointer;">Page 3</li> | <li style="display:inline-block; cursor:pointer;">Page 4</li> | <li style="display:inline-block; cursor:pointer;">Page 5</li> </ul>

Pagination container 1
<div class="pagination_container"> Text of page 1 Text of page 2 Text of page 3 Text of page 4 Text of page 5

Pagination container 2
<div class="pagination_container"> Text of page 1 Text of page 2 Text of page 3 Text of page 4 Text of page 5