Issue
I have pagination, I'm not getting how to activate the next/previous icon when clicking on it. Currently, if I click on the numbers, it shows the respective page. Please help to show the pages when clicked on next & previous buttons and also how to disable next & previous icons if the page is on first & last page respectively. Please help. Below is my code
jQuery($ => {
let pageSize = 2;
let pageCount = Math.ceil($('.content').length / 2);
let $pageContainer = $('.page-container');
let $pageLinks = $('#pagin li a.page');
let $prev = $('#prev');
let $next = $('#next');
let currentPage = $pageContainer.data('page');
let setActivePage = page => {
let start = pageSize * (page - 1);
let end = pageSize * page;
$(".content").hide().slice(start, end).show();
$('#prev').toggleClass('disabled', page <= 1);
$('#next').toggleClass('disabled', page >= pageCount);
$pageLinks.removeClass("current");
$pageLinks.eq(page - 1).addClass('current');
$pageContainer.data('page', page);
}
setActivePage(currentPage);
$pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
$prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
$next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});
$(document).ready(function(){
$(".num1").click(function(){
$(".beforenum").css('display','none');
$(".testingbef").css("display","block");
$(".num4").css("display","block");
$(".num5").css("display","block");
$(".num6").css("display","none");
$(".num7").css("display","none");
$(".afternum").css("display","block");
$(".testing").css("display","none");
$(".testing").css("display","none");
})
$(".num4").click(function(){
$(".testingbef").css("display","block");
$(".beforenum").css("display","none");
$(".num6").css("display","none");
})
$(".num5").click(function(){
$(".testingbef").css("display","none");
$(".beforenum").css("display","block");
$(".num6").css("display","block");
$(".num4").css("display","block");
$(".num7").css("display","none");
})
$(".num6").click(function(){
$(".num7").css('display','block');
$(".num4").css("display","none");
$(".num5").css("display","block");
$(".testing").css("display","none");
$(".afternum").css('display','block');
})
$(".num7").click(function(){
$(".afternum").css('display','none');
$(".testing").css("display","block");
$(".num5").css("display","none");
})
$(".num10").click(function(){
$(".afternum").css('display','none');
$(".testing").css("display","block");
$(".num7").css("display","block");
$(".num6").css("display","block");
$(".testingbef").css("display","none");
$(".num4").css("display","none");
$(".num5").css("display","none");
$(".beforenum").css("display","block");
})
});
$(document).ready(function(){
$('<a class="beforenum">...</a>').on('click', function(e){
alert();
console.log('prev');
api.page('previous').draw('page');
e.preventDefault();
})
});
.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 500px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a.disabled {
pointer-events: none;
opacity: 0.4;
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
.testing{
display:none;}
.beforenum{
display:none;}
.num6{display:none;}
.num7{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
<div class="content">17 I have some content</div>
<div class="content">18 I have some content</div>
<div class="content">19 I have some content</div>
<div class="content">20 I have some content</div>
<div class="content">21 I have some content</div>
<div class="content">22 I have some content</div>
<div class="content">23 I have some content</div>
<div class="content">24 I have some content</div>
</div>
<div id="pagin">
<ul>
<li>
<a href="#" id="prev">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg>
</a>
</li>
<li class="num1"><a class="page current" href="#">1</a></li>
<li class="beforenum"><a class="page" href="#" >...</a></li>
<li class="testingbef"><a class="page" href="#">2</a></li>
<li class="testingbef"><a class="page" href="#">3</a></li>
<li class="num4"><a class="page" href="#">4</a></li>
<li class="num5"><a class="page" href="#">5</a></li>
<li class="num6"><a class="page" href="#">6</a></li>
<li class="num7"><a class="page" href="#">7</a></li>
<li class="afternum"><a class="page" href="#" >...</a></li>
<li class="testing"><a class="page" href="#">8</a></li>
<li class="testing"><a class="page" href="#">9</a></li>
<li class="num10"><a class="page" href="#">10</a></li>
<li>
<a href="#" id="next">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a>
</li>
</ul>
</div>
Solution
To enable/disable the #prev
and #next
links based on the current page you can perform a check in the showPage
function which adds a class to them that sets pointer-events: none
.
Also note the use of slice()
instead of an explicit loop to hide/show the .content
elements relevant to the current page.
Update:
On clicking of next & previous button how shall I show the respective page
To achieve this, change your logic so that the function which sets the page also updates the UI - ie. displays the .content
for the current page, sets the active page button state and the disabled state of prev/next.
From there the only thing you need to record is the current page number, so that you can increment/decrement it when prev/next are clicked, which I've done using a data()
attribute on a container to the .content
elements. You can then pass that to the function which sets the active page.
Try this:
jQuery($ => {
let $pageContainer = $('.page-container');
let $content = $pageContainer.children('.content');
let $pageLinks = $('#pagin li a.page');
let $prev = $('#prev');
let $next = $('#next');
let pageSize = 2;
let pageCount = Math.ceil($('.content').length / 2);
let currentPage = $pageContainer.data('page') || 1;
let setActivePage = page => {
let start = pageSize * (page - 1);
let end = pageSize * page;
$content.hide().slice(start, end).show();
$prev.toggleClass('disabled', page <= 1);
$next.toggleClass('disabled', page >= pageCount);
$pageLinks.removeClass("current").eq(page - 1).addClass('current');
$pageContainer.data('page', page);
}
setActivePage(currentPage);
$pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
$prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
$next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});
.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 400px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a.disabled {
pointer-events: none;
opacity: 0.4;
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
</div>
<ul id="pagin">
<li>
<a href="#" id="prev">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg>
</a>
</li>
<li><a class="page current" href="#">1</a></li>
<li><a class="page" href="#">2</a></li>
<li><a class="page" href="#">3</a></li>
<li><a class="page" href="#">4</a></li>
<li><a class="page" href="#">5</a></li>
<li><a class="page" href="#">6</a></li>
<li><a class="page" href="#">7</a></li>
<li><a class="page" href="#">8</a></li>
<li>
<a href="#" id="next">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a>
</li>
</ul>
Answered By - Rory McCrossan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.