<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.easyPaginate.js"></script>
<link href="http://localhost/es/bootstrap.css" rel="stylesheet" />
<style type="text/css">
/* Cosmetic only */
#easyPaginate {width:300px;}
#easyPaginate div {display:block;margin-bottom:10px;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;} 
</style>
<a href="http://192.168.1.66/temp.php"><h1>Home</h1></a><br><br><br><hr>
<div id="easyPaginate">
 <?php
 for($i=1;$i<=100;$i++)
 {
  ?>
  <div class='cool' style='border:1px solid red;width:100%;height:20px;'>
   <div style='color: #FFF;background: green;width: 40%;float: left;height:auto;'>
    <strong><?=$i?></strong>
   </div>
   <div style='color: #000;background:  yellow;width: 40%;float: right;height:auto;'>
    <strong><?=$i?></strong>
   </div>
  </div>
  <?php
 } ?>  
</div>
<div class="easyPaginate1" style='border:1px solid red;width:100%;height:20px;'>
</div>
<script type='text/javascript'>
// input array contain some elements.
var array = ['10', '20', '30', '40', '50'];
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = array.indexOf("10");
// Printing desired values.
console.log(a);
$(function() {
 $('#easyPaginate').easyPaginate({
  paginateElement: 'div.cool',
  elementsPerPage: 2,
  firstButtonText : '',
  lastButtonText: '',
  prevButtonText:'',
  nextButtonText : '→',
  items:100,
  edges:2,
 });
 var nav  = $('.easyPaginateNav').clone(true,true);
 $(".easyPaginateNav").remove();
 nav.prependTo('div.easyPaginate1');
 
});
</script>