KW Online Tools Zone
Knowledge Walls
View All Tools Home
PAGINATIONEQ
[Jquery editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
<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>
CSS [Ctrl+Enter] - to run
#divPages{ float:left; } #divPages div{ float:left; margin:5px 10px; }
Jquery [Ctrl+Enter] - to run
$(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=0;j<pageSize;j++) { $("div.divControl").eq(j).show(); } $("div.page").click(function(){ var currentPage = $(this).text(); $("div.divControl").hide(); for(var k=(currentPage*2)-2;k<(currentPage*2);k++) { $("div.divControl").eq(k).show(); } }); });
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved