Simple Pagination

by Daniel Gualberto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css">
<div class="container">
<div id="listingTable"></div>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="javascript:prevPage()" id="btn_prev" aria-label="Anterior">
        <span aria-hidden="true">&laquo;</span> Anterior
      </a>
    </li>
    <li>
      <a href="javascript:nextPage()" id="btn_next" aria-label="Próxima">Próxima 
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
    <button class="btn btn-primary" type="button">
    Página: <span class="badge" id="page"></span>
    </button>
  </ul>
</nav>
</div>

JavaScript

var current_page=1,
records_per_page=2,
objJson=["Nome 1","Nome 2","Nome 3","Nome 4","Nome 5","Nome 6","Nome 7","Nome 8","Nome 9","Nome 10"];
function prevPage(){
	1<current_page&&changePage(--current_page)
}
function nextPage(){
	current_page<numPages()&&changePage(++current_page)
}
function changePage(e){
	var n=document.getElementById("btn_next"),
	t=document.getElementById("btn_prev"),
	o=document.getElementById("listingTable"),
	r=document.getElementById("page");
	e<1&&(e=1),
	e>numPages()&&(e=numPages()),
	o.innerHTML="";
	for(var g=(e-1)*records_per_page;
		g<e*records_per_page&&g<objJson.length;g++
	)
		o.innerHTML+=objJson[g]+"<br>";
	r.innerHTML=e+"/"+numPages(),
	t.style.visibility=1==e?"hidden":"visible",
	e==numPages()?n.style.visibility="hidden":
	n.style.visibility="visible"
}
function numPages(){
	return Math.ceil(objJson.length/records_per_page)
}
window.onload=function(){
	changePage(1)
};