Create jQuery based pagination

This is a simple tutorial on how to create a jQuery based pagination with some animation. I encountered some issues while trying to implement WordPress’s own pagination on my blog,  so I had to come up with an alternative that doesn’t rely on WordPress’s loop to work. Let’s get started.

  1. Identify the repeating element. In this case, the element is Repeating-Box and we have 10 of them.
    <div id="paginator-plate">
      <div class="repeating-box">One</div>
      <div class="repeating-box">Two</div>
      <div class="repeating-box">Three</div>
      <div class="repeating-box">Four</div>
      <div class="repeating-box">Five</div>
      <div class="repeating-box">Six</div>
      <div class="repeating-box">Seven</div>
      <div class="repeating-box">Eight</div>
      <div class="repeating-box">Nine</div>
      <div class="repeating-box">Ten</div>
    </div><!-- End Paginator Plate -->
    
  2. We do not want all the Repeating-Boxes to show at the same time so what do we do? We group them and have them show one group at a time in response to the user’s request. The functions below groups the repeating DIV (repeating-box) in twos and then wrap them each in the DIV with the class “pageGroup”.
    $(document).ready(function() {
      var perPage = $(".repeating-box");
      for (var i = 0; i < perPage.length; i += 2) {
        perPage.slice(i, i + 2).wrapAll('<div class="pageGroup"></div>'); 
        /* The above line Wraps "repeating-box" div's in twos */
      }
      
      $('.pageGroup:not(:first-of-type)').hide(); // Hide all but the first group
      $('#paginator-nav ul li').click(function() { // When #paginator-nav ul li is clicked do the following
        $('.pageGroup:visible').hide(); // Hide the vissible group
        $('.pageGroup').eq($(this).index()).show('slow'); // Show the corresponding group to the clicked link
      });
    });
    
    
  3. Create your pagination navigation and add it to where you’d like it to show. See the one for this tutorial below.
    <div id="paginator-nav">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    

That is it, we’re done.
if you have any questions or if you know how to make the pagination work better, please share.

See Working and editable example below

Click on Create jQuery based pagination Part2, which a tutorial on how to automate the pagination navigation.

Leave a Reply