How to Create Pagination of Numbers with Borders
Pagination
How To, for Web Applications
By: Chrysanthus Date Published: 4 Apr 2025
This tutorial explains How to Create Pagination of Numbers with Borders. Pagination refers to a horizontal bar at the bottom of a webpage. This bar has numbers. When a number is clicked, a new webpage loads into the browser. For the project of this tutorial, the numbers have borders.
The complete webpage code is given at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the file in the browser. Click some of the numbers and notice how the new number clicked, becomes "active". However, no new page will be loaded because the URLs of the number "buttons" are "dummy" URLs, since this is a teaching exercise. The reader is advised to do that before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code of the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage has at least the first four tags in the HTML head element above. The numbers are actually the contents of anchor elements. An anchor element is the code for a hyperlink. The anchor elements are referred to, as buttons, in this tutorial. So the HTML style element has a few CSS rules to style the anchor elements. There will be some JavaScript code to indicate that the new number button clicked, is the "active" hyperlink, and to apparently open the new webpage. The HTML body element will have the number buttons.
The HTML body Element Content
The content of the HTML body element is:
<h2>Pagination</h2>
<p>Pagination with hover effects:</p>
<p>These numbers occur at bottom of page.</p>
<div class="pagination">
<a href='#' onclick="openPage('first')">«</a>
<a href='#' onclick="openPage('previous')">‹</a>
<a href='#page2' class="active" id='2' onclick="fn(id)">1</a>
<a href='#page3' id='3' onclick="fn(id)">2</a>
<a href='#page4' id='4' onclick="fn(id)">3</a>
<a href='#page5' id='5' onclick="fn(id)">4</a>
<a href='#page6' id='6' onclick="fn(id)">5</a>
<a href='#page7' id='7' onclick="fn(id)">6</a>
<a href='#' onclick="openPage('next')">›</a>
<a href='#' onclick="openPage('end')">»</a>
</div>
There are 10 anchor elements (hyperlinks) here, in a div element, whose class-name is "pagination". This div is the bar that contains the anchor elements. The first two anchor elements are for the « and ‹ symbols, respectively. The last two anchor elements are for the › and » symbols, respectively.
The rest of the anchor elements are numbered buttons. The third anchor element has URL (href) #page2, class-name '#page2', ID '2', and anchor element number content, 1. This is actually the anchor element for the first page, numbered, 1, though its dummy URL is #page2 (for easy programming). The fourth anchor element has URL #page3, no current class-name, ID '3', and anchor element number content, 2. This is actually the anchor element for the second page, numbered 2, though its dummy URL is #page3. If this anchor element is clicked, it would be given the current class-name of "active", by JavaScript (see below). That sequence of anchor elements continues, until the eighth anchor element, with URL #page7, no current class-name, ID '7', and anchor element number content, 7. This is actually the anchor element for the seventh page, numbered 7, though its dummy URL is #page7.
The HTML Style Element Content
Styling all the Anchor Elements
The CSS rule to style all the anchor elements is:
div.pagination a {
color: black;
float: left; /* to take off their margins */
padding: 8px 16px;
border: 1px solid #ddd; /* Gray */
text-decoration: none;
}
Note in the selector, that each anchor element is accessed using the class-name of their div container.
The color of each number (text) is black. Each anchor element in the div is floated to the left. With that, there will be no separation between the borders of consecutive buttons. The top and bottom padding inside the rectangles of each anchor (a) element is 8px. The left and right padding inside the rectangle of each anchor element is 16px. The border of each button (anchor element) is solid, of color, #ddd (gray) and 1px thick. A number as text inside the anchor element, is not underlined. Do not forget that each button is an anchor element and should have its text (number) underlined.
Though the group of buttons look like a one row table, the container div itself has no border. There is no one border surrounding the buttons. The borders are of the anchor elements.
Remember that a button in this tutorial, is a hyperlink which is of the anchor element code.
The Active Button Style
When a number button is clicked, and its webpage loads, that button is said to be active. And when active, the following CSS rule applies:
div.pagination a.active {
background-color: dodgerblue;
color: white;
}
The background color becomes, dodgerblue. The number (text) color becomes white. When the website first loads, it is the first number button that is active. That is why, in the body element, the first number button (anchor element) has the attribute, "class='active'". When a different number is clicked, JavaScript would make that button (number) active, by giving it the above style. The active style in the previously clicked button is removed (see JavaScript below).
Button On-hover Style
Remember that a button is a hyperlink whose code is the anchor element. When the mouse pointer goes over an anchor element, the background color becomes #ddd (gray). This does not apply to the button that is active. The CSS rule is:
div.pagination a:hover:not(.active) {
background-color: #ddd;
}
JavaScript
Each of the anchor elements has the onclick event. For easy and convenient reach by the reader, the container div.pagination is presented again below, as follows:
<div class="pagination">
<a href='#' onclick="openPage('first')">«</a>
<a href='#' onclick="openPage('previous')">‹</a>
<a href='#page2' class="active" id='2' onclick="fn(id)">1</a>
<a href='#page3' id='3' onclick="fn(id)">2</a>
<a href='#page4' id='4' onclick="fn(id)">3</a>
<a href='#page5' id='5' onclick="fn(id)">4</a>
<a href='#page6' id='6' onclick="fn(id)">5</a>
<a href='#page7' id='7' onclick="fn(id)">6</a>
<a href='#' onclick="openPage('next')">›</a>
<a href='#' onclick="openPage('end')">»</a>
</div>
When the « button is clicked, the webpage for button 1 will open and button 1 will be made active; all that achieved by JavaScript. When the ‹ button is clicked, the webpage for the button just before the last button clicked, will open and this previous button will be made active; all that achieved by JavaScript. When the › button is clicked, the webpage for the button just after the last button clicked, will open and this next button will be made active; all that achieved by JavaScript. When the » button is clicked, the webpage for the button at the end, will open and that button at the end will be made active; all that achieved by JavaScript.
When any other button is clicked, its webpage is opened, as a result of its href attribute. JavaScript will make the button active. The whole JavaScript code is:
<script type="text/javascript">
var currentID = 2;
function fn(id) {
currentID = id;
var url = '#page0';
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
function openPage(position) {
const myCollection = document.getElementsByTagName("a");
var ID = '2';
if (position == 'first')
ID = '2';
else if (position == 'previous')
ID = "" + (parseInt(currentID) - 1) + "";
else if (position == 'next')
ID = "" + (parseInt(currentID) + 1) + "";
else if (position == 'end')
ID = "" + (myCollection.length - 3) + "";
var url = myCollection[ID].href;
if (parseInt(ID) >= 2 && parseInt(ID) <= (myCollection.length - 3))
window.open(url, _self);
fn(ID);
}
</script>
The first function is to make the number button clicked, active. The second function is to respond to the « , ‹ , › and » buttons appropriately.
Multi-page Websites
Many simple websites today are single long page websites, where what would have been separate web-pages, are now short sections in one long page, and each section would fill the screen (when called). The above JavaScript code works fine for such a single long page website, to give the hyperlink a special presentation (active). For a multi-page website, with separate web-pages, use JavaScript similar to the following, to give the "active" hyperlink, the active presentation:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').className = "active";
}
</script>
where 3 here is the ID for the anchor element (hyperlink) for webpage 3. Read through the code if you have not already done so. This JavaScript code must be in webpage 3. Webpage 3 must have id='3' in the corresponding anchor element in webpage 3, in order to display the anchor element in active presentation (active state).
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
div.pagination a {
color: black;
float: left; /* to take off their margins */
padding: 8px 16px;
border: 1px solid #ddd; /* Gray */
text-decoration: none;
}
div.pagination a.active {
background-color: dodgerblue;
color: white;
}
div.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
<script type="text/javascript">
var currentID = 2;
function fn(id) {
currentID = id;
var url = '#page0';
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
function openPage(position) {
const myCollection = document.getElementsByTagName("a");
var ID = '2';
if (position == 'first')
ID = '2';
else if (position == 'previous')
ID = "" + (parseInt(currentID) - 1) + "";
else if (position == 'next')
ID = "" + (parseInt(currentID) + 1) + "";
else if (position == 'end')
ID = "" + (myCollection.length - 3) + "";
var url = myCollection[ID].href;
if (parseInt(ID) >= 2 && parseInt(ID) <= (myCollection.length - 3))
window.open(url, _self);
fn(ID);
}
</script>
</head>
<body>
<h2>Pagination</h2>
<p>Pagination with hover effects:</p>
<p>These numbers occur at bottom of page.</p>
<div class="pagination">
<a href='#' onclick="openPage('first')">«</a>
<a href='#' onclick="openPage('previous')">‹</a>
<a href='#page2' class="active" id='2' onclick="fn(id)">1</a>
<a href='#page3' id='3' onclick="fn(id)">2</a>
<a href='#page4' id='4' onclick="fn(id)">3</a>
<a href='#page5' id='5' onclick="fn(id)">4</a>
<a href='#page6' id='6' onclick="fn(id)">5</a>
<a href='#page7' id='7' onclick="fn(id)">6</a>
<a href='#' onclick="openPage('next')">›</a>
<a href='#' onclick="openPage('end')">»</a>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the file in the browser. Click some of the numbers and notice how the new number clicked, becomes "active". However, no new page will be loaded because the URLs of the number "buttons" are "dummy" URLs, since this is a teaching exercise.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript