Home > Software engineering >  Pagination number sequence not working ( jquery)
Pagination number sequence not working ( jquery)

Time：05-21

The pagination sequence is not working if I click on any numbers. If I click on number 3 it jumps to number 4, every time I click the number it jumps to an alternative number. But if I click on the next & previous button it is working properly. It is happening because of the ellipsis li. Any help would be appreciated. Thank you. Below is my snippet

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() {
        /*pagination numbers*/
        $(".pagination1").click(function(){
          $(".beforenum").css('display','none');
          $(".pagination2").css("display","block");
          $(".pagination3").css("display","block");
          $(".pagination4").css("display","block");
          $(".pagination5").css("display","block");
          $(".pagination6").css("display","none");
          $(".pagination7").css("display","none");
          $(".afternum").css("display","block");
          $(".pagination8").css("display","none");
          $(".pagination9").css("display","none");        
        })

        $(".pagination4").click(function(){
          $(".pagination2").css("display","block");
          $(".pagination3").css("display","block");
          $(".beforenum").css("display","none");
          $(".pagination6").css("display","none");
      })
       $(".pagination5").click(function(){
          $(".pagination2").css("display","none");
          $(".pagination3").css("display","none");
          $(".beforenum").css("display","block");
          $(".pagination6").css("display","block");
          $(".pagination4").css("display","block");
          $(".pagination7").css("display","none");
        
        })
        $(".pagination6").click(function(){
          $(".pagination7").css('display','block');
          $(".pagination4").css("display","none");
          $(".pagination5").css("display","block");
          $(".pagination8").css("display","none");
          $(".pagination9").css("display","none");
          $(".afternum").css('display','block');
        
        })
        $(".pagination7").click(function(){
          $(".afternum").css('display','none');
          $(".pagination8").css("display","block");
          $(".pagination9").css("display","block");
          $(".pagination5").css("display","none");
        
        })
        $(".pagination10").click(function(){
          $(".afternum").css('display','none');
          $(".pagination8").css("display","block");
          $(".pagination9").css("display","block");
          $(".pagination7").css("display","block");
          $(".pagination6").css("display","block");
          $(".pagination2").css("display","none");
          $(".pagination3").css("display","none");
          $(".pagination4").css("display","none");
          $(".pagination5").css("display","none");
          $(".beforenum").css("display","block");        
        })

       /* next/previous click function */
            $(document).ready(function () {

              $('#next').click(function()   {                   
                if($(".pagination1 a").hasClass('current')) {                             
                  $(".beforenum").css('display','none');
                  $(".pagination2").css("display","block");
                  $(".pagination3").css("display","block");
                  $(".pagination4").css("display","block");
                  $(".pagination5").css("display","block");
                  $(".pagination6").css("display","none");
                  $(".pagination7").css("display","none");
                  $(".afternum").css("display","block");
                  $(".pagination8").css("display","none");
                  $(".pagination9").css("display","none");                   
                  }                   
              });

              $('#next').click(function()   {                   
                if($(".pagination4 a").hasClass('current')) {                             
                  $(".pagination2").css("display","block");
                  $(".pagination3").css("display","block");
                  $(".beforenum").css("display","none");
                  $(".pagination6").css("display","none");                
                  }                   
              });

              $('#next').click(function()   {                   
                if($(".pagination5 a").hasClass('current')) {                             
                  $(".pagination2").css("display","none");
                  $(".pagination3").css("display","none");
                  $(".beforenum").css("display","block");
                  $(".pagination6").css("display","block");
                  $(".pagination4").css("display","block");
                  $(".pagination7").css("display","none");                    
                  }                   
              });
              $('#next').click(function()   {                   
                if($(".pagination6 a").hasClass('current')) {                             
                  $(".pagination7").css('display','block');
                  $(".pagination4").css("display","none");
                  $(".pagination5").css("display","block");
                  $(".pagination8").css("display","none");
                  $(".pagination9").css("display","none");
                  $(".afternum").css('display','block');              
                  }                   
              });
              $('#next').click(function()   {                   
                if($(".pagination7 a").hasClass('current')) {                             
                  $(".afternum").css('display','none');
                  $(".pagination8").css("display","block");
                  $(".pagination9").css("display","block");
                  $(".pagination5").css("display","none");              
                  }                   
              });
              $('#next').click(function()   {                   
                if($(".pagination10 a").hasClass('current')) {                                             
                  $(".rightpagpos").addClass('disabled');           
                  }                   
              });

              $('#prev').click(function()   {                   
                if($(".pagination5 a").hasClass('current')) {                             
                  $(".pagination2").css("display","none");
                  $(".pagination3").css("display","none");
                  $(".beforenum").css("display","block");
                  $(".pagination6").css("display","block");
                  $(".pagination4").css("display","block");
                  $(".pagination7").css("display","none");                    
                  }                   
              });

              $('#prev').click(function()   {                   
                if($(".pagination6 a").hasClass('current')) {                             
                  $(".pagination7").css('display','block');
                  $(".pagination4").css("display","none");
                  $(".pagination5").css("display","block");
                  $(".pagination8").css("display","none");
                  $(".pagination9").css("display","none");
                  $(".afternum").css('display','block');              
                  }                   
              });

              $('#prev').click(function()   {                   
                if($(".pagination4 a").hasClass('current')) {                             
                  $(".pagination2").css("display","block");
                  $(".pagination3").css("display","block");
                  $(".beforenum").css("display","none");
                  $(".pagination6").css("display","none");                
                  }                   
              });
              

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

.beforenum{
display:none;}
.pagination8{display:none;}
.pagination9{display:none;}
.pagination6{display:none;}
.pagination7{display:none;}

.beforenum,.afternum{
    float: left;
}
<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 >17 I have some content</div>
  <div >18 I have some content</div>
  <div >19 I have some content</div>
  <div >20 I have some content</div>
  <div >21 I have some content</div>
  <div >22 I have some content</div>
  <div >23 I have some content</div>
  <div >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 ><a  href="#">1</a></li>
  <li ><a  href="#" >...</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="#" >...</a></li>  
  <li ><a  href="#">8</a></li>
  <li ><a  href="#">9</a></li>
  <li ><a  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>

CodePudding user response：

This expression; $(e.target).closest("li").index()) isn't giving the result you want becouse of those two <li ><a href="#">...</a></li> elements, are also childs and you're not consider them. But using parseInt($(e.target).contents().text())) instead is enough.

Just deleteting those two elements would also work.

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(parseInt($(e.target).contents().text())));

  $prev.on('click', e => setActivePage($pageContainer.data('page') - 1));

  $next.on('click', e => setActivePage($pageContainer.data('page')   1));
});
    

        
 $(document).ready(function() {
        /*pagination numbers*/
        $(".pagination1").click(function(){
          $(".beforenum").css('display','none');
          $(".pagination2").css("display","block");
          $(".pagination3").css("display","block");
          $(".pagination4").css("display","block");
          $(".pagination5").css("display","block");
          $(".pagination6").css("display","none");
          $(".pagination7").css("display","none");
          $(".afternum").css("display","block");
          $(".pagination8").css("display","none");
          $(".pagination9").css("display","none");        
        })

        $(".pagination4").click(function(){
          $(".pagination2").css("display","block");
          $(".pagination3").css("display","block");
          $(".beforenum").css("display","none");
          $(".pagination6").css("display","none");
      })
       $(".pagination5").click(function(){
          $(".pagination2").css("display","none");
          $(".pagination3").css("display","none");
          $(".beforenum").css("display","block");
          $(".pagination6").css("display","block");
          $(".pagination4").css("display","block");
          $(".pagination7").css("display","none");
        
        })
        $(".pagination6").click(function(){
          $(".pagination7").css('display','block');
          $(".pagination4").css("display","none");
          $(".pagination5").css("display","block");
          $(".pagination8").css("display","none");
          $(".pagination9").css("display","none");
          $(".afternum").css('display','block');
        
        })
        $(".pagination7").click(function(){
          $(".afternum").css('display','none');
          $(".pagination8").css("display","block");
          $(".pagination9").css("display","block");
          $(".pagination5").css("display","none");
        
        })
        $(".pagination10").click(function(){
          $(".afternum").css('display','none');
          $(".pagination8").css("display","block");
          $(".pagination9").css("display","block");
          $(".pagination7").css("display","block");
          $(".pagination6").css("display","block");
          $(".pagination2").css("display","none");
          $(".pagination3").css("display","none");
          $(".pagination4").css("display","none");
          $(".pagination5").css("display","none");
          $(".beforenum").css("display","block");        
        })

       /* next/previous click function */
            $(document).ready(function () {

              $('#next').click(function()   {                   
                if($(".pagination1 a").hasClass('current')) {                             
                  $(".beforenum").css('display','none');
                  $(".pagination2").css("display","block");
                  $(".pagination3").css("display","block");
                  $(".pagination4").css("display","block");
                  $(".pagination5").css("display","block");
                  $(".pagination6").css("display","none");
                  $(".pagination7").css("display","none");
                  $(".afternum").css("display","block");
                  $(".pagination8").css("display","none");
                  $(".pagination9").css("display","none");                   
                  }                   
              });

              $('#next').click(function()   {                   
                if($(".pagination4 a").hasClass('current')) {                             
                  $(".pagination2").css("display","block");
                  $(".pagination3").css("display","block");
                  $(".beforenum").css("display","none");
                  $(".pagination6").css("display","none");                
                  }                   
              });

              $('#next').click(function()   {                   
                if($(".pagination5 a").hasClass('current')) {                             
                  $(".pagination2").css("display","none");
                  $(".pagination3").css("display","none");
                  $(".beforenum").css("display","block");
                  $(".pagination6").css("display","block");
                  $(".pagination4").css("display","block");
                  $(".pagination7").css("display","none");                    
                  }                   
              });
              $('#next').click(function()   {                   
                if($(".pagination6 a").hasClass('current')) {                             
                  $(".pagination7").css('display','block');
                  $(".pagination4").css("display","none");
                  $(".pagination5").css("display","block");
                  $(".pagination8").css("display","none");
                  $(".pagination9").css("display","none");
                  $(".afternum").css('display','block');              
                  }                   
              });
              $('#next').click(function()   {                   
                if($(".pagination7 a").hasClass('current')) {                             
                  $(".afternum").css('display','none');
                  $(".pagination8").css("display","block");
                  $(".pagination9").css("display","block");
                  $(".pagination5").css("display","none");              
                  }                   
              });
              $('#next').click(function()   {                   
                if($(".pagination10 a").hasClass('current')) {                                             
                  $(".rightpagpos").addClass('disabled');           
                  }                   
              });

              $('#prev').click(function()   {                   
                if($(".pagination5 a").hasClass('current')) {                             
                  $(".pagination2").css("display","none");
                  $(".pagination3").css("display","none");
                  $(".beforenum").css("display","block");
                  $(".pagination6").css("display","block");
                  $(".pagination4").css("display","block");
                  $(".pagination7").css("display","none");                    
                  }                   
              });

              $('#prev').click(function()   {                   
                if($(".pagination6 a").hasClass('current')) {                             
                  $(".pagination7").css('display','block');
                  $(".pagination4").css("display","none");
                  $(".pagination5").css("display","block");
                  $(".pagination8").css("display","none");
                  $(".pagination9").css("display","none");
                  $(".afternum").css('display','block');              
                  }                   
              });

              $('#prev').click(function()   {                   
                if($(".pagination4 a").hasClass('current')) {                             
                  $(".pagination2").css("display","block");
                  $(".pagination3").css("display","block");
                  $(".beforenum").css("display","none");
                  $(".pagination6").css("display","none");                
                  }                   
              });
              

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

.beforenum{
display:none;}
.pagination8{display:none;}
.pagination9{display:none;}
.pagination6{display:none;}
.pagination7{display:none;}

.beforenum,.afternum{
    float: left;
}
<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 >17 I have some content</div>
  <div >18 I have some content</div>
  <div >19 I have some content</div>
  <div >20 I have some content</div>
  <div >21 I have some content</div>
  <div >22 I have some content</div>
  <div >23 I have some content</div>
  <div >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 ><a  href="#">1</a></li>
  <li ><a  href="#" >...</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="#" >...</a></li>  
  <li ><a  href="#">8</a></li>
  <li ><a  href="#">9</a></li>
  <li ><a  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>

Page link：https//www.codepudding.com/Softwareengineering/414582.html

Prev:How to call a controller Action passing id parameters from a modal partialView?
Next:I have a JSON table, how can I create a sql table with this information in PLSQL?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding