<!DOCTYPE html>
<html>
<head>
<style>
#divPages {
float: left;
}
#divPages div {
float: left;
margin: 5px 10px;
}
</style>
</script>
<script>
$(document).ready(function () {
var totalrows = $(".divControl").length;
var pageSize = 2;
var noOfPage = totalrows / pageSize;
noOfPage = Math.ceil(noOfPage);
for (var i = 1; i <= noOfPage; i++) {
$("#divPages").append('<div class="page">' + i + '</div>');
}
$("div.divControl").hide();
for (var j = 1; j <= pageSize; j++) {
$("div.divControl:nth-child(" + j + ")").show();
}
$("div.page").click(function () {
var currentPage = $(this).text();
$("div.divControl").hide();
for (var k = (currentPage * pageSize) - (pageSize-1); k <= (currentPage * pageSize); k++) {
$("div.divControl:nth-child(" + k + ")").show();
}
});
});
</script>
</head>
<body>
<div class="divControl">Abi</div>
<div class="divControl">Anant</div>
<div class="divControl">balraj</div>
<div class="divControl">devi</div>
<div class="divControl">manasha</div>
<div class="divControl">mani</div>
<div class="divControl">nimmi</div>
<div class="divControl">god</div>
<div class="divControl">gopal</div>
<div id="divPages"></div>
</body>
</html>
