3

I have a container including 16 div elements stacked on top of eachother. I want to limit the number of displayed div elements to 4 per page and show a pagination underneath the content. The pagination should populate itself with new numbers as the new div elements are being added in the html file in the future, but the number of shown elements per page should be limited to 4. I am trying to implement a pure Javascript solution, and this is what I tried so far:

The buttons in the HTML (I am not including the div elements, they are 16 like I said and carry the class name of ".events-section__main-event"):

<input type="button" id="first" onclick="firstPage()" value="first" />
<input type="button" id="next" onclick="nextPage()" value="next" />
<input type="button" id="previous" onclick="previousPage()" value="previous" />
<input type="button" id="last" onclick="lastPage()" value="last" />

JS:

var pageList = new Array();
var currentPage = 1;
var numberPerPage = 4;
var numberOfPages = 0;
var events = Array.prototype.slice.call(document.querySelectorAll(".events-section__main-event"));

function getNumberOfPages() {
    return Math.ceil(events.length / numberPerPage);
}

function nextPage() {
    currentPage += 1;
    loadList();
}

function previousPage() {
    currentPage -= 1;
    loadList();
}

function firstPage() {
    currentPage = 1;
    loadList();
}

function lastPage() {
    currentPage = numberOfPages;
    loadList();
}

function loadList() {
    var begin = ((currentPage - 1) * numberPerPage);
    var end = begin + numberPerPage;

    pageList = events.slice(begin, end);
    drawList();
    check();
}

function drawList() {
    for (i = 0; i < pageList.length; i++) {
        pageList[i].classList.remove("events-section__main-event");
        pageList[i].classList.add("not-visible");
    }
}

function check() {
    document.getElementById("next").disabled = currentPage == numberOfPages ? true : false;
    document.getElementById("previous").disabled = currentPage == 1 ? true : false;
    document.getElementById("first").disabled = currentPage == 1 ? true : false;
    document.getElementById("last").disabled = currentPage == numberOfPages ? true : false;
}

function load() {
    loadList();
}

window.onload = load;

I try to show and hide elements using a css class with display: none property. Seems I am half way there, but still the elements are messed up when clicking on the buttons and they just disappear.

Improve this question
1
  • @Amberlamps I am stuck at the drawList() function and I cannot tackle the problem. The code sample is neatly shown together with the explanation of the problem. Commented Mar 8, 2017 at 20:11

1 Answer 1

Reset to default
1

Here's a minor modification of your code that might help you. The only real change is that the not-visible class needs to be added to all of the items in the pageList before the pageList is updated - this ensures that the old set is hidden before the next set is displayed.

var pageList = new Array();
var currentPage = 1;
var numberPerPage = 4;

var events = Array.prototype.slice.call(document.querySelectorAll(".events-section__main-event"));

function getNumberOfPages() {
  return Math.ceil(events.length / numberPerPage);
}

function nextPage() {
  currentPage += 1;
  loadList();
}

function previousPage() {
  currentPage -= 1;
  loadList();
}

function firstPage() {
  currentPage = 1;
  loadList();
}

function lastPage() {
  currentPage = numberOfPages;
  loadList();
}

function loadList() {
  var begin = ((currentPage - 1) * numberPerPage);
  var end = begin + numberPerPage;
  for (i = 0; i < pageList.length; i++) {
    pageList[i].classList.add("not-visible"); // make the old list invisible
  }
  pageList = events.slice(begin, end);
  drawList();
  check();
}

function drawList() {
  for (i = 0; i < pageList.length; i++) {
    pageList[i].classList.remove("not-visible");
  }
}

function check() {
  document.getElementById("next").disabled = currentPage == numberOfPages ? true : false;
  document.getElementById("previous").disabled = currentPage == 1 ? true : false;
  document.getElementById("first").disabled = currentPage == 1 ? true : false;
  document.getElementById("last").disabled = currentPage == numberOfPages ? true : false;
}

function load() {
  loadList();
}

var numberOfPages = getNumberOfPages();
window.onload = load;
.events-section__main-event {
  height: 25px;
  width: 50px;
  border: 1px black solid;
}

.not-visible {
  display: none;
}
<div id="1" class="events-section__main-event">1</div>
<div id="2" class="events-section__main-event">2</div>
<div id="3" class="events-section__main-event">3</div>
<div id="4" class="events-section__main-event">4</div>
<div id="5" class="events-section__main-event not-visible">5</div>
<div id="6" class="events-section__main-event not-visible">6</div>
<div id="7" class="events-section__main-event not-visible">7</div>
<div id="8" class="events-section__main-event not-visible">8</div>
<div id="9" class="events-section__main-event not-visible">9</div>
<div id="10" class="events-section__main-event not-visible">10</div>
<div id="11" class="events-section__main-event not-visible">11</div>
<div id="12" class="events-section__main-event not-visible">12</div>
<div id="13" class="events-section__main-event not-visible">13</div>
<div id="14" class="events-section__main-event not-visible">14</div>
<div id="15" class="events-section__main-event not-visible">15</div>
<div id="16" class="events-section__main-event not-visible">16</div>

<input type="button" id="first" onclick="firstPage()" value="first" />
<input type="button" id="next" onclick="nextPage()" value="next" />
<input type="button" id="previous" onclick="previousPage()" value="previous" />
<input type="button" id="last" onclick="lastPage()" value="last" />

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you! I was stuck into thinking inside the box (meaning only inside the .js file) and didn't realise that I could modify the html a bit to solve the problem!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.