Showing posts with label pagination. Show all posts
Showing posts with label pagination. Show all posts

Wednesday 22 August 2018

Easypaginate integration


<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>