CODEWITHSUNDEEP
javascripthtml
anon
anon

Reputation:

Populating html file with array of div's using JS

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.

Upvotes: 3

Views: 139

Answers (1)

rphv
rphv

Reputation: 5537

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" />

Upvotes: 1

Related Questions