Today, We want to share with you next and previous buttons in javascript with demo.In this post we will show you bootstrap dynamic pagination example, hear for how to implement pagination in html table using javascript? we will give you demo and example for implement.In this post, we will learn about pagination code in php HTML with an example.

Simple pagination with only next and previous buttons

Contents

HTML Code

<div class="smartcard-holder">
    <div class="smartcard" id="smartcard-1" data-id='1' style="display: block;">
        <p>First Options</p>
        <input type="checkbox" />Product <br />
        <input type="checkbox" />Product
    </div>
    <div class="smartcard" id="smartcard-2" data-id='2'>
        <p>Second Options</p>
        <input type="checkbox" />Product <br />
        <input type="checkbox" />Product
    </div>
    <div class="smartcard" id="smartcard-3" data-id='3'>
        <p>Third Options</p>
        <input type="checkbox" />Product <br />
        <input type="checkbox" />Product
    </div>
    <button type="button" class="back">Back</button>
    <button type="button" class="next">Next</button>
</div>
<div class="end" data-id='4'>
    <p>Congratulation! You are done!</p>
    <button type="button" class="edit-previous">Edit Previous Options</button>
</div>

jQuery Code

$('body').on('click', '.next', function() { 
    var id = $('.smartcard:visible').data('id');
    var nextId = $('.smartcard:visible').data('id')+1;
    $('[data-id="'+id+'"]').hide();
    $('[data-id="'+nextId+'"]').show();

    if($('.back:hidden').length == 1){
        $('.back').show();
    }

    if(nextId == 4){
        $('.smartcard-holder').hide();
        $('.end').show();
    }
});

$('body').on('click', '.back', function() { 
    var id = $('.smartcard:visible').data('id');
    var prevId = $('.smartcard:visible').data('id')-1;
    $('[data-id="'+id+'"]').hide();
    $('[data-id="'+prevId+'"]').show();

    if(prevId == 1){
        $('.back').hide();
    }    
});

$('body').on('click', '.edit-previous', function() { 
    $('.end').hide();
    $('.smartcard-holder').show();
    $('#smartcard-3').show();
});

Complete example to select next and prev element using Jquery

index.html

<!DOCTYPE html>
<html>
 <head> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
   $(document).ready(function() { 
    var statrtPagination = $("ul li").eq(0);
    var width = statrtPagination.width();
    
    $("#next").click(function(){ 
     if(statrtPagination.is(':last-child')){  
      $(this).prop('disabled', true);
      $("#prev").prop('disabled', false);
     }
 
     width+=50;
     statrtPagination.css({"background-color" : '#DD4B39',
      width : width + 'px'
     });
     statrtPagination = statrtPagination.next();   
    });
 
    var endPagination = $("ul li").eq(-1);
    width =  endPagination.width(); 
 
    $("#prev").click(function(){ 
     if(endPagination.is(':first-child')){  
      $(this).prop('disabled', true);   
     }
  
     width-=50;   
     endPagination.css({"background-color" : '#DD4B39',
      width : width +'px'
     });   
  
     endPagination = endPagination.prev();   
    });
 
   });
 </script>   
 
 <style>
  ul{
   font-family: monospace;
   font-size: 15px;
   font-family: monospace; 
   font-style: normal;
   font-size-adjust: none;
   width:auto;   
  }
   
  ul li{
   background-color:#ff9900;
   width:100px;
   margin:5px;
   padding:5px;
   list-style-type:none;
  }
 </style>
</head>
<body>
 <h2>Jquery next() prev() functions</h2>
 <div>
  <ul>
   <li>Laptop</li>
   <li>Mobile</li>
   <li>LCD</li>
   <li>Iphone</li>
   <li>Computer</li>  
  </ul>
 </div>
 </div>
  <button id="next" class="btn">Next</button>  
  <button id="prev" class="btn" disabled>Prev</button>    
 </div>
 </body>
</html>

I hope you get an idea about jquery pagination demo with source code.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Simple pagination with only next and previous buttons

Complete example to select next and prev element using Jquery

Related posts: