This particular code snippet is designed to generate a new page for every set of 8 div elements.
pageSize = 8;
showPage = function(page) {
$('.line-content').hide();
$('.line-content:gt('+((page-1)*pageSize)+'):lt('+(page)*(pageSize-1)+')').show();
$('.line-content:eq('+((page-1)*pageSize)+')').show();
}
var pgs = Math.ceil($('.line-content').length/pageSize);
var pgnt = '';
for(var i=1;i<=pgs;i++){
pgnt += '<li><a href="#">'+i+'</a></li>';
}
$('#pagin').html(pgnt);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
showPage(1);.current {
color: green;
}
#pagin li {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="line-content">1 I have some content</div>
<div class="line-content">2 I have some content</div>
<div class="line-content">3 I have some content</div>
<div class="line-content">4 I have some content</div>
<div class="line-content">5 I have some content</div>
<div class="line-content">6 I have some content</div>
<div class="line-content">7 I have some content</div>
<div class="line-content">8 I have some content</div>
<div class="line-content">9 I have some content</div>
<div class="line-content">10 I have some content</div>
<div class="line-content">11 I have some content</div>
<div class="line-content">12 I have some content</div>
<ul id="pagin"></ul>The main objective of this code is to display a paging style by creating
<li><a href></a></li><Div>. However, the concern arises when too many <li><a href></a></li><< Prev 1 2 3 4 5 6 7 8 Next >>The aim is to have at least 8 containers on a page, adjusting the number of pages if it falls below 1. Additionally, incorporating features such as Prev, Next, and even << >> for user-friendly navigation.
Thank you in advance for any assistance provided.