title: pagination with javascript and xml
body: <p>I am currently parsing an xml file and getting contents to display in a table of 5 columns and x number of rows depending on the number of items are in the xml file. Unfortunately, everything is appearing on the page and I need to implement pagination in my javascript to handle hundreds of records from the xml file. I was thinking 50 items per page or 20 rows at 5 columns each. Below is the code I have so far: </p>
  
  <p>Javascript:</p>
  
  <pre><code>function generateTables(){
  
      if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();      
        }
      else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
  
      xmlhttp.open("GET","xml/test_102.xml",false);    
      xmlhttp.send();
      xmlDoc=xmlhttp.responseXML;
  
      var content = document.getElementById('content');
      var x=xmlDoc.getElementsByTagName("vids");
      var xmlContent = "&lt;table class='table' id='videos' border='0'&gt;";
      var rows = parseInt(x.length/5 + .6)
      var count = 0;
      var z = 0;
      //Pagination idea. We can get the x.length value which is the total tags that we have. We can divide that by 50 to get teh number of pages we have. Then we can simply simply each on a pge and we will knwo the # of pages in a variable.
      //rows
      for (i=0;i&lt;rows;i++) {
          //This will handle if there is an uneven amount of columns.
          if ((count + 5) &gt; x.length)
              {
              z = x.length - count
              }
          else 
              {
              (z = 5)
              }
          xmlContent += '&lt;tr&gt;'
  
          //columns
          for (y=0;y&lt;z;y++) {
              var title = x[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
              var vidPath = x[count].getElementsByTagName("vidPath")[0].childNodes[0].nodeValue;
              var png = x[count].getElementsByTagName("pngPath")[0].childNodes[0].nodeValue;
              var gif = x[count].getElementsByTagName("gifPath")[0].childNodes[0].nodeValue;
  
              xmlContent += "&lt;td align='center'&gt;" + title;
              xmlContent += "&lt;br /&gt;&lt;a href='"+ vidPath;
              xmlContent+="'&gt;&lt;img src='"+ png +"' width='50%'";
              xmlContent+= "onmouseover=\"this.src='"+gif+"'\" onmouseout=\"this.src='"+png+"'\"/&gt;&lt;/a&gt;&lt;/td&gt;";         
              count++
              }
          xmlContent += '&lt;/tr&gt;'
      }
      xmlContent += "&lt;/table&gt;";
      //document.write(rows)  
      content.innerHTML = xmlContent;
  
  }
  </code></pre>
  
  <p>This is the html that I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;My tables&lt;/title&gt;
  &lt;link href="css/styles.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="js/records.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="title"&gt;Page Title&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  window.onload = function() {
     generateTables();
  };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Right now this is working in that it will display all the records in the correct rows/columns. I just need to implement paging with what I have so far. Any ideas?</p>