client-side javascript-jquery pagination with previous and next feature

Question

I have created a simple JavaScript-jQuery pagination its working fine but the next and previous function i don't know to create that function to display next and previous items.

Assuming we have fixed container that contains multiple div items with fixed with and height. the container have 33 items but will only show 10 items for pagination.

on-browser load all items are added with class hideme so all items are hidden with display: none then the jquery script will removeClass hideme to the first 10 items and creates pagination buttons. For our example we have 33 items so we create 4 pagination buttons and each pagination buttons finds 10 items to next 10 items (and remaining items) once clicked.

So far i have come up with my script for pagination below:

HTML

<div id="container">
  <ul class="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
    <li>item 31</li>
    <li>item 32</li>
    <li>item 33</li>
  </ul>
</div>

<div class="pagination_wrapper">
  <div class="pagination">
    <div class="previous button">Previous</div>
    <!-- insert pagination buttons here -->
    <div class="next button insertbeforer">Next</div>
  </div>
</div>

JAVASCRIPT

$(document).ready(function() {
  // count number of items
  var count_items = $(".items li").length;

  // divide items by 10
  var separate_items = count_items / 10;

  // create empty variable
  var page_division = "";

  // check separate_items if contains decimal if true add additional pagination
  if (separate_items % 1 != 0) {
    page_division = separate_items + 1;
    console.log(page_division);
  } else {
    page_division = separate_items;
    console.log(page_division);
  }

  // iterate then generate links for each items pagination
  for (var items_pagination = 1; items_pagination < page_division; items_pagination++) {
    $(".pagination .insertbeforer").before("<div class='button page" + items_pagination + "'>" + items_pagination + "</div>");
  };

  // hide all items
  $('.items li').addClass('hideme');

  // display first 10 items
  $.each($('.items li'), function(index, value) {
    if (index <= 9) {
      $(this).toggleClass('hideme')
    }
  });

  // display items from 1-10
  $(".page1").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 1; item < 11; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 11-20
  $(".page2").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 11; item < 21; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 21-30
  $(".page3").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 21; item < 31; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 31-33
  $(".page4").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 31; item < 41; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });

});

CSS

#container{width:420px;height:300px;display:block;overflow:hidden;border:1px solid gray}
.items{flex-direction:row;display:flex;flex-wrap:wrap}
.items li{list-style:none;display:block;width:60px;height:60px;background:red;margin:5px;color:#fff}
.pagination_wrapper{width:420px;height:30px;display:block;border:1px solid gray}
.pagination{margin-left:15%}
.pagination .button{background:transparent;color:#000;border:transparent;font-weight:700;margin-left:2px;border-radius:3px!important;padding:1px 10px;line-height:1.8em;border:1px solid #535353;display:inline;cursor:pointer}
.hideme{display:none!important;width:0;height:0}

link to working jsfiddle here https://jsfiddle.net/jsbrianluna/wctnbbvq/17/

Answer 1

Him here is an example that does work:

 $(document).ready(function() { // count number of items var count_items = $(".items li").length; // Keep a record of current page. var current_page = 1; // divide items by 10 var separate_items = count_items / 10; // create empty variable var page_division = ""; if (separate_items % 1 != 0) { page_division = separate_items + 1; console.log(page_division); } else { page_division = separate_items; console.log(page_division); } // iterate then generate links for each items pagination for (var items_pagination = 1; items_pagination < page_division; items_pagination++) { $(".pagination .insertbeforer").before("<div class='button page" + items_pagination + "'>" + items_pagination + "</div>"); }; // hide all items $('.items li').addClass('hideme'); // display first 10 items $.each($('.items li'), function(index, value) { if (index <= 9) { $(this).toggleClass('hideme') } }); // display items from 1-10 $(".page1").click(function() { current_page = 1; $('.items li').addClass('hideme'); for (var item = 1; item < 11; item++) { $(".items li:nth-of-type(" + item + ")").removeClass('hideme'); }; }); // display items from 11-20 $(".page2").click(function() { current_page = 2; $('.items li').addClass('hideme'); for (var item = 11; item < 21; item++) { $(".items li:nth-of-type(" + item + ")").removeClass('hideme'); }; }); // display items from 21-30 $(".page3").click(function() { current_page = 3; $('.items li').addClass('hideme'); for (var item = 21; item < 31; item++) { $(".items li:nth-of-type(" + item + ")").removeClass('hideme'); }; }); // display items from 31-33 $(".page4").click(function() { current_page = 4; $('.items li').addClass('hideme'); for (var item = 31; item < 41; item++) { $(".items li:nth-of-type(" + item + ")").removeClass('hideme'); }; }); $('.next').click(function() { //count_items=total if ((current_page) * 10 >= count_items) { return; } $('.items li').addClass('hideme'); for (var item = ((current_page) * 10 + 1); item < ((current_page + 1) * 10 + 1); item++) { $(".items li:nth-of-type(" + item + ")").removeClass('hideme'); }; current_page += 1; }) $('.previous').click(function() { if (current_page == 1) { return; } $('.items li').addClass('hideme'); current_page -= 1; for (var item = ((current_page - 1) * 10 + 1); item < ((current_page) * 10 + 1); item++) { $(".items li:nth-of-type(" + item + ")").removeClass('hideme'); }; }) }); 

 #container { width: 420px; height: 300px; display: block; overflow: hidden; border: 1px solid gray; } .items { flex-direction: row; display: flex; flex-wrap: wrap; } .items li { list-style: none; display: block; width: 60px; height: 60px; background: red; margin: 5px; color: white; } .pagination_wrapper { width: 420px; height: 30px; display: block; border: 1px solid gray; } .pagination { margin-left: 15%; } .pagination .button { background: transparent; color: black; border: transparent; font-weight: 700; margin-left: 2px; border-radius: 3px !important; padding: 1px 10px; line-height: 1.8em; border: 1px solid #535353; display: inline; cursor: pointer; } .hideme { display: none !important; width: 0px; height: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <ul class="items"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> <li>item 21</li> <li>item 22</li> <li>item 23</li> <li>item 24</li> <li>item 25</li> <li>item 26</li> <li>item 27</li> <li>item 28</li> <li>item 29</li> <li>item 30</li> <li>item 31</li> <li>item 32</li> <li>item 33</li> </ul> </div> <div class="pagination_wrapper"> <div class="pagination"> <div class="previous button">Previous</div> <!-- insert pagination buttons here --> <div class="next button insertbeforer">Next</div> </div> </div> 

You'll notice that I added the current page variable and added it to all your button click definitions.

I also added the previous and next functions.