next/previous button activate on pagination using jquery-CodePudding

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

$(document).ready(function() {
  pageSize = 2;

  showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
    });
  }

  showPage(1);

  $("#pagin li a").click(function() {
    $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()))
  });

});

.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: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 >1 I have some content</div>
<div >2 I have some content</div>
<div >3 I have some content</div>
<div >4 I have some content</div>
<div >5 I have some content</div>
<div >6 I have some content</div>
<div >7 I have some content</div>
<div >8 I have some content</div>
<div >9 I have some content</div>
<div >10 I have some content</div>
<div >11 I have some content</div>
<div >12 I have some content</div>
<div >13 I have some content</div>
<div >14 I have some content</div>
<div >15 I have some content</div>
<div >16 I have some content</div>

<ul id="pagin">
  <li id="prev"><a  href="#"><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  href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li id="next"><a  href="#"><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>

CodePudding user response：

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 do this change your logic so that the function which sets the page also updates the UI - ie. the active page button, and the disabled states 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, and pass that to the function which sets the active page.

Try this:

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));
});

.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  data-page="1">
  <div >1 I have some content</div>
  <div >2 I have some content</div>
  <div >3 I have some content</div>
  <div >4 I have some content</div>
  <div >5 I have some content</div>
  <div >6 I have some content</div>
  <div >7 I have some content</div>
  <div >8 I have some content</div>
  <div >9 I have some content</div>
  <div >10 I have some content</div>
  <div >11 I have some content</div>
  <div >12 I have some content</div>
  <div >13 I have some content</div>
  <div >14 I have some content</div>
  <div >15 I have some content</div>
  <div >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  href="#">1</a></li>
  <li><a  href="#">2</a></li>
  <li><a  href="#">3</a></li>
  <li><a  href="#">4</a></li>
  <li><a  href="#">5</a></li>
  <li><a  href="#">6</a></li>
  <li><a  href="#">7</a></li>
  <li><a  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>

CodePudding user response：

On click of next and previous button. it doesn't give the text value rather it has icon in its anchor tag. Thus it highlights the button and showPage(parseInt($(this).text())) function doesn't work

Here are the changes required based on your code

$(document).ready(function() {
  pageSize = 2;

  showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
    });
  }

  showPage(1);

  $("#pagin li a").click(function() {
    let selectedPage = $("#pagin li a.current").parent().index();
    $("#pagin li a").removeClass("disable");
    $("#pagin li a").removeClass("current");

    if($(this).parent().is('#next')) {    
     showPage(selectedPage   1)
     $("#pagin li").eq(selectedPage   1).children('a').addClass("current");
    } else if($(this).parent().is('#prev')) {
      showPage(selectedPage - 1)
      $("#pagin li").eq(selectedPage -1).children('a').addClass("current");
    } else {
      $(this).addClass("current")
      showPage(parseInt($(this).text()))
    }
   if($("#pagin li a.current").parent().index() == 1) {
    $('#prev a').addClass('disable');
   }
   if($("#pagin li a.current").parent().index() == 8) { 
    $('#next a').addClass('disable');
   }
  });

});

.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: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;
}
.disable {
  pointer-events: none;
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >1 I have some content</div>
<div >2 I have some content</div>
<div >3 I have some content</div>
<div >4 I have some content</div>
<div >5 I have some content</div>
<div >6 I have some content</div>
<div >7 I have some content</div>
<div >8 I have some content</div>
<div >9 I have some content</div>
<div >10 I have some content</div>
<div >11 I have some content</div>
<div >12 I have some content</div>
<div >13 I have some content</div>
<div >14 I have some content</div>
<div >15 I have some content</div>
<div >16 I have some content</div>

<ul id="pagin">
  <li id="prev"><a  href="#"><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  href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li id="next"><a  href="#"><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>