title: Simple pagination using javascript
body: <p>I'm trying to create a simple pagination using Javascript (yes, I am aware of jquery plugins but I really would like to figure out how I can do this from scratch). Anyway, I'm quite close to finishing the paging but I can't quite figure out how I can make the back button work. Also, how can I add page numbers so that I can have something like: Next ... 1 2 .. 9 10 ... Last? Currently I only have next and last buttons. Here's how my code looks like currently. I know it still needs fixing but, I'll take of that later.</p>
  
  <pre><code>&lt;?php for ($i = 1; $i &lt;= 50; $i++) { ?&gt;
  &lt;div id="div&lt;?php echo $i; ?&gt;" style="display:none;"&gt;
      &lt;div&gt;&lt;label&gt;object&lt;?php echo $i; ?&gt;&lt;/label&gt;&lt;br/&gt;&lt;br/&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;?php   $j = $i;
  }
  ?&gt;
  &lt;div&gt;&lt;input type="button" id="btn_next" value="NEXT" onclick="goNext()"/&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="button" style="display:none;" id="btn_back" value="BACK" onclick="goBack()"/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I don't think there's anything in my html/php elements that need changing but I added it for more detail. Here's my current javascript:</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
  for (var i = 0; i &lt;= 5; i++) {
  if(document.getElementById('object'+i) != null) {
  
      if (document.getElementById('object'+i) != null &amp;&amp; typeof(document.getElementById('object'+i)) != undefined &amp;&amp; document.getElementById('object'+i) != "") {
          var x = document.getElementById('object'+i).style.display = 'block';
          var count5 = +i;
      }
  }}
  
  var nextArr = [1, 2, 3, 4, 5];
  var prevArr = [1,2,3,4,5];
  
  function goNext(){
  var max = "&lt;?php echo $j; ?&gt;"
  var num1 = i;
  var num2 = num1 + 4;
  var num3 = num1 - 1;
  
  for (var next = nextArr.length; next &lt;= num2; next++) {
      document.getElementById('object'+next).style.display = 'block';
  }
  
  if(num2 == max){
      document.getElementById('btn_next').style.display = 'none';
  }
  
  for (var newArr= 5; newArr &lt;= num3; newArr++)
  {
      nextArr[newArr] = [newArr];
  }
  
  var quotient = num1 / 5;
  if(quotient &gt;= 1) {
      for (var value = num3; value &gt; 0; value--) {
          document.getElementById('object'+value).style.display = 'none';
      }
  }
  
  //increment i
  i = num2 + 1;
  
  //display back if array lenght is &gt; 5
  if(nextArr.length &gt;= 5) {
      document.getElementById('btn_back').style.display = 'block';
  }}
  
  function goBack() {
  var num1 = i;
  var num2 = num1 + 4;
  var num3 = num1 - 1;
  var num4 = num3 - 5;
  
  i = num2+ 1;
  
  for (var back = num4; back &gt;= 5; back--)
  {
      prevArr[back] = [back];
  }
  
  var quotient = num1 / 5;
  if (quotient &gt;= 1) {
      for(var prev = num4; prev &gt;= 0 ; prev--)
      {
          document.getElementById('hiddendiv'+prev).style.display='block';
      }       
  }}&lt;/script&gt;
  </code></pre>
  
  <p>num1 is the first index of the next 5 items to be displayed, num2 is the last index of the next 5 items, num3 is the last index of the currently displayed items and num4 is the 1st index of the currently displayed items. The back button already does something however, I just can't put my finger on the right idea to hide the elements when the previous divs are displayed. Any suggestions would be great.</p>