KW Online Tools Zone
Knowledge Walls
View All Tools Home
SIMPLE-PAGINATION-IN-JQUERY-EXAMPLE
[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=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(); } }); });
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved