Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple JS pagination script that can be easily modified to accept a JSON array. Known bug where pages 11-20 are skipped when paging through.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Simple JavaScript pagination</title>
<meta charset="UTF-8">
<style>
div{
position: relative;
}
#stage{
background: #ccc;
height: 400px;
position: relative;
width: 1200px;
}
#page_nav li{
display: inline-block;
list-style: none;
padding: 5px;
}
#page_nav li a{
color: #000;
cursor: pointer;
text-decoration: underline;
}
input[type="text"]{
width: 30px;
}
#page_info{
display: block;
border: solid #ccc;
margin: 5px;
padding: 5px;
}
#curr_page{
font-weight: bold;
}
#page_nav{
border: solid #ccc;
margin: 5px;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<section>
<h1>Simple JavaScript pagination</h1>
<a href="http://" id="previous">&lt;&lt; Previous</a> |
<a href="http://" id="next">Next &gt;&gt;</a> |
<a href="http://" id="reset">Reset</a> |
<label>Go to Page <input type="text" name="page_input" id="page_input" value=""></label>
<a href="#" id="goto">&gt;&gt;</a>
<span id="page_info">You are currently viewing page <label id="curr_page"></label></span>
<ul id="results"></ul>
<nav>
<ul id="page_nav">
</ul>
</nav>
</section>
<script type="text/javascript" src="simple-pagination.js"></script>
</body>
</html>
(function(){
var config = {
max_results: 100,
max_per_page: 10,
page: 1
},
no_of_pages = Math.ceil( config.max_results / config.max_per_page ),
results = [];
function init(){
for( var x = 0; x < config.max_results; x++ ){
results[x] = "Result " + x;
}
document.getElementById("next").onclick = function() {
pager("next");
return false;
};
document.getElementById("previous").onclick = function() {
pager("previous");
return false;
};
document.getElementById("reset").onclick = function() {
pager("reset");
return false;
};
document.getElementById("goto").onclick = function() {
pager("goto", document.getElementById("page_input").value);
return false;
};
document.getElementById("page_nav").onclick = function(e) {
var page = e.srcElement.getAttribute("data-page");
if(page){
pager("goto", page);
}
return false;
};
update_page();
}
function pager(action, page) {
switch (action) {
case "next":
if( (config.page + 1) < no_of_pages ){
++config.page;
}
break;
case "previous":
if( (config.page - 1) >= 1 ){
--config.page;
}
break;
case "goto":
config.page = page;
break;
case "reset":
config.page = 1;
break;
default:
break;
}
update_page();
}
function build_nav() {
var i,
page_nav = "";
for( i = config.page; i < no_of_pages; i++ ){
page_nav += "<li><a data-page=" + i + ">" + i + "</a></li>\n";
}
return page_nav;
}
function build_results(){
var i,
tmp = "",
start = ( config.page !== 1 )? config.page * config.max_per_page : 1,
end = start + config.max_per_page,
result;
for( i = start; i < end; i++ ){
result = results[i];
if(typeof result !== "undefined"){
tmp += "<li>" + result + "</li>\n";
}
else {
tmp = "";
}
}
return tmp;
}
function update_page(){
document.getElementById("curr_page").innerText = config.page;
document.getElementById("page_nav").innerHTML = build_nav();
document.getElementById("results").innerHTML = build_results();
}
window.addEventListener("load", function() {
init();
});
})();
@peterolayinka
Copy link

peterolayinka commented May 14, 2017

Thanks for this

Loading

@thanhphongphammbd
Copy link

thanhphongphammbd commented May 9, 2018

Thank you so much for this.

Loading

@victorstan
Copy link

victorstan commented Feb 9, 2019

very intuitive, thank you

Loading

@Adrien-github1
Copy link

Adrien-github1 commented Jun 23, 2020

      			case "goto":
              if (page >= no_of_pages) {
                 config.page = no_of_pages;
                 document.getElementById("page_input").value = no_of_pages;
              } else {
      				   config.page = Number(page);
              }
      				break;

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment