title: javascript -Dynamic pagination pure Js
body: <p>I'm trying to create dynamic pagination in pure Javascript. 
  I'm running in a couple roadblocks, like trying to create dynamic pagination and link the page numbers to show the right items. Here is the code I'm struggling with and please see the <a href="http://codepen.io/Delano83/pen/XjYxkQ" rel="nofollow">Codepen</a> to see the entire project.</p>
  
  <p>Initial variables:</p>
  
  <pre><code>var currentPage = 1;
  var numPages = 0;
  var studentsPerPage = 10;
  var index;
  </code></pre>
  
  <p>Creating the pagination in Js:</p>
  
  <pre><code>var paginationFilter = function pageFilter (nbOfEntries) {
  var pagination = document.createElement('div');
  var ulList = document.createElement('ul');
  var liList = document.createElement('li');
  var pageLink = document.createElement('a');
  
  pagination.setAttribute("class", "pagination");
  pageLink.setAttribute("class", "navlink");
  pageLink.setAttribute("href", "#");
  
  pagination.appendChild(ulList);
  ulList.appendChild(liList);
  liList.appendChild(pageLink);
  
  return pagination;  };
  </code></pre>
  
  <p>Here are my functions to find the length of my student list, find the number of pages to create, hide all the elements and show only the 10 first items on my list. The other items should be on the next pages.</p>
  
  <pre><code>var numberOfStudents = function () {
  var numberOfStudents = eachStudent.length;
  return (numberOfStudents);}
  
  //Finding the number of pages
  var numberOfPages = function () {
      var numberOfPages = parseInt(numberOfStudents() / studentsPerPage);
      if ( numberOfStudents() % studentsPerPage &gt; 0 ){
          numPages += 1;
      }
      return numberOfPages;
  }
  //Hiding all the students
  var hideAll = function () {
      for (var i = 0; i &lt; numberOfStudents(); i++) {
          eachStudent[i].style.display = "none";
      }
  };
  
  //Display only the 10 first items on the page
  function showStudents (number) {
      for (var i = 0; i &lt; studentsPerPage; i++) {
          index = number * studentsPerPage - studentsPerPage + i;
          eachStudent[index].style.display = "block";
          console.log(index);
      } 
  };
  
  
  
  function createPages () {
      for (var i = 0; i &lt;= numberOfPages(); i++) {
          page.appendChild(paginationFilter());
          var navlink = document.getElementsByClassName(".navlink");
          var linkText = document.createTextNode(i);
          //i'm trying to append the node to the link in order to create the pagination links dynamically but it's not working...
          navlink.appendChild('linkText');
          console.log(linkText);
      }
  };
  </code></pre>
  
  <p>So I'm wondering how to create the pagination dynamically depending on the number of items on the list. These items are filtered dynamically as well, so the number of pages need to update 'live'. </p>
  
  <p>link to fiddle: <a href="http://codepen.io/Delano83/pen/XjYxkQ" rel="nofollow">http://codepen.io/Delano83/pen/XjYxkQ</a> </p>
  
  <p>Any remarks or comments on my code are appreciated!</p>