Simple pagination example using JQuery, CSS, HTML.

HTML:
<ul class="records">
    <li><div>record 1</div></li>
    <li><div>record 2</div></li>
    <li><div>record 3</div></li>
    <li><div>record 4</div></li>
    <li><div>record 9</div></li>
    <li><div>record 10</div></li>
    <li><div>record 11</div></li>
    <li><div>record 12</div></li>
    <li><div>record 13</div></li>
</ul>
<ul class="pagination">
    <li><a class="prev" href="#">prev</a></li>
    <li><a class="pagenum" href="#">1</a></li>
    <li><a class="pagenum" href="#">2</a></li>
    <li><a class="pagenum" href="#">3</a></li>
    <li><a class="pagenum" href="#">4</a></li>
    <li><a class="next" href="#">next</a></li>
</ul>




CSS:
<style>
ul {margin: 0; padding: 0;list-style-type:none;}
ul.records > li {
   margin: 5px;
   list-style-type:none;
   padding: 5px;
 
}
ul.pagination > li {float:left;margin: 5px;}
</style>



JAVASCRIPT: 
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$( document ).ready(function() {
var currentPage = 1;
var totRecords = $('ul.records li').size();
var recPerPage = 2;
var numOfPages = Math.ceil(totRecords/recPerPage);

$('.pagination li .pagenum').on('click', function(e) {
   e.preventDefault();
 
   //$('html, body').animate({scrollTop: $("#toTheTop").offset().top}, 1000);
   window.scrollTo(0,0);
 
   currentPage = $(this).text();
   showPage();
});

$('.pagination li .prev').on('click', function(e) {
   e.preventDefault();
 
  //$('html, body').animate({scrollTop: $("#toTheTop").offset().top}, 1000);
   window.scrollTo(0,0);
 
   currentPage = currentPage - 1;
   showPage();
});
$('.pagination li .next').on('click', function(e) {
   e.preventDefault();
 
  //$('html, body').animate({scrollTop: $("#toTheTop").offset().top}, 1000);
   window.scrollTo(0,0);
 
   currentPage++;
   showPage();
});

$('ul.pagination li a:contains("1")').click();

function showPage() {
   if(currentPage > 1) {
       //then show prev btn
       $('ul.pagination > li .prev').show();
   } else { //hide
       $('ul.pagination > li .prev').hide();
   }
   if(currentPage < numOfPages) {
       //then show next btn
       $('ul.pagination > li .next').show();
   } else { //hide
       $('ul.pagination > li .next').hide();
   }
   $('ul.records li').hide(); //hide all records
   var startRecIndx = recPerPage * (currentPage - 1);
   var lastRecIndx = (startRecIndx + recPerPage - 1);
   $('ul.records li').each(function(indx, elem) {
       if(indx >= startRecIndx && indx <= lastRecIndx) {
           $(elem).show();
       }
   });  
}
});

</script>



You can view the Live Demo at JSFiddle.