This page serves as a demo for this post: https://adriancs.com/html-css-js/1353/use-javascript-to-build-a-html-pagination/
Download Source Code.
Feel free to adjust the values below:
Total Records:
Total Records Per Page:
Total Slots:
Current Page:
Page Number Field Name:
HREF URL Content Format:
OnClick Script Content Format:
Total Records Per Page:
Total Slots:
Current Page:
Page Number Field Name:
HREF URL Content Format:
OnClick Script Content Format:
The CSS used in this demo:
/* Style for Pagination 1 */
.pagination1 a {
border-radius: 7px;
background-color: lightblue;
text-decoration: none;
padding: 7px 10px;
color: black;
font-style: normal;
}
.pagination1 a:hover,
.pagination1 strong a {
background-color: darkblue;
color: white;
}
/* Style for Pagination 2 */
.pagination2 a {
border-radius: 7px;
background-color: lightblue;
text-decoration: none;
padding: 7px 10px;
color: black;
font-style: normal;
}
.pagination2 a:hover,
.pagination2 strong a {
background-color: darkblue;
color: white;
}
.pagination2 {
color: white;
}
.pagination2 {
padding: 10px;
background-color: #333;
border-radius: 5px;
}
.pagination2 a {
text-decoration: none;
margin: 0 5px;
padding: 5px 10px;
border-radius: 5px;
background-color: #555;
color: #ddd;
transition: background-color 0.3s, color 0.3s;
}
.pagination2 a:hover,
.pagination2 a:focus {
background-color: #777;
color: #fff;
outline: none;
}
.pagination2 strong a {
background-color: #0088cc;
color: #fff;
pointer-events: none;
cursor: default;
}
.pagination2 .ellipsis {
color: #aaa;
pointer-events: none;
}
/* Style for Pagination 3 */
.pagination3 {
padding: 10px;
background-color: #2f2f2f;
border-radius: 5px;
color: #b9e986;
}
.pagination3 a {
text-decoration: none;
margin: 0 5px;
padding: 5px 10px;
border-radius: 5px;
background-color: #3e3e3e;
color: #b9e986;
transition: background-color 0.3s, color 0.3s;
}
.pagination3 a:hover,
.pagination3 a:focus {
background-color: #4e4e4e;
color: #d4fcb8;
outline: none;
}
.pagination3 strong a {
background-color: #8dc641;
color: #2f2f2f;
pointer-events: none;
cursor: default;
}
.pagination3 .ellipsis {
color: #6f6f6f;
pointer-events: none;
}
/* Style for Pagination 4 */
.pagination4 {
padding: 10px;
background-color: #fff0f0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.pagination4 a {
text-decoration: none;
margin: 0 5px;
padding: 5px 10px;
border-radius: 5px;
background-color: #ffe5e5;
color: #333;
transition: background-color 0.3s, color 0.3s;
}
.pagination4 a:hover,
.pagination4 a:focus {
background-color: #ffc3c3;
color: #d60000;
outline: none;
}
.pagination4 strong a {
background-color: #ff9999;
color: #fff;
pointer-events: none;
cursor: default;
}
.pagination4 .ellipsis {
color: #bfbfbf;
pointer-events: none;
}
/* Style for Pagination 5 */
.pagination5 {
padding: 10px;
background-color: #f0faff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.pagination5 a {
text-decoration: none;
margin: 0 5px;
padding: 5px 10px;
border-radius: 5px;
background-color: #e1efff;
color: #007bff;
transition: background-color 0.3s, color 0.3s;
}
.pagination5 a:hover,
.pagination5 a:focus {
background-color: #d0e7ff;
color: #0056b3;
outline: none;
}
.pagination5 strong a {
background-color: #007bff;
color: #ffffff;
pointer-events: none;
cursor: default;
}
.pagination5 .ellipsis {
color: #bfbfbf;
pointer-events: none;
}