title: Ideas on javascript pagination
body: <p>I'm developing a google map with populated data from a mysql database using an .xml file to transfer the data between. On the same page as the map I have a table displaying all the data from the .xml file. Now I need to know how I can paginate them using javascript.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script src="http://maps.googleapis.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  
        var side_bar_html = '&lt;tr class="style19"&gt;&lt;td width="12%" height="51" class="table-header-repeat line-left"&gt;&lt;p&gt;&lt;a href=""&gt;Business Name&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/td&gt;Address&lt;td width="17%"class="table-header-repeat line-left" bgcolor="#EEEEEE"&gt;&lt;p&gt;&lt;a href=""&gt;Address&lt;/a&gt;&lt;/td&gt;&lt;td width="14%"class="table-header-repeat line-left" bgcolor="#EEEEEE"&gt;&lt;p&gt;&lt;a href=""&gt;Licence Type&lt;/a&gt;&lt;/td&gt;&lt;td width="9%" class="table-header-repeat line-left" bgcolor="#EEEEEE"&gt;&lt;p&gt;&lt;a href=""&gt;LicenceNumber&lt;/a&gt;&lt;/td&gt;&lt;td width="9%"class="table-header-repeat line-left" bgcolor="#EEEEEE"&gt;&lt;p&gt;&lt;a href=""&gt;Phone&lt;/a&gt;&lt;/td&gt;&lt;td width="12%"class="table-header-repeat line-left" bgcolor="#EEEEEE"&gt;&lt;p&gt;&lt;a href=""&gt;Locate&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;'; 
        var to_htmls = [];
        var from_htmls = [];
        var htmls = [];
        var gmarkers = []; 
        var marker = new GMarker(point);
        var i = gmarkers.length;
        var map = null;
        var contentString = html;
  function downloadUrl(url,callback) 
  {
        var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  
           request.onreadystatechange = function() {
       if (request.readyState == 4) 
       {
           request.onreadystatechange = doNothing;
           callback(request, request.status);
     }
  };
  
           request.open('GET', url, true);
           request.send(null);
  }
       gmarkers.push(marker);
       //side_bar_html += '&lt;a href="javascript:myclick(' + (gmarkers.length-1) + ')"&gt;' + name + '&lt;\/a&gt;&lt;br&gt;';
  
       side_bar_html += '&lt;tr&gt;&lt;tr class="style40"&gt;&lt;td height="39" nowrap="nowrap" bgcolor="#EEEEEE"&gt;&lt;span class="style17"&gt;' + name + '&lt;/span&gt;&lt;/td&gt;&lt;td height="39" nowrap="nowrap" bgcolor="#EEEEEE"&gt;&lt;span class="style17"&gt;'+address+'&lt;/span&gt;&lt;/td&gt;&lt;td height="39" nowrap="nowrap" bgcolor="#EEEEEE"&gt;&lt;span class="style17"&gt; '+ type +'&lt;/span&gt;&lt;/td&gt;&lt;td height="39" nowrap="nowrap" bgcolor="#EEEEEE"&gt;&lt;span class="style17"&gt;'+ licence_number +'&lt;/span&gt;&lt;/td&gt;&lt;td height="39" nowrap="nowrap" bgcolor="#EEEEEE"&gt;&lt;span class="style17"&gt;'+ phone +'&lt;/span&gt;&lt;/td&gt;&lt;td height="39" nowrap="nowrap" bgcolor="#EEEEEE"&gt;&lt;span class="style17"&gt;&lt;a href="javascript:myclick(' + (gmarkers.length-1) + ')"&gt;Locate&lt;\/a&gt;&lt;br&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;';
  
  function myclick(i)
   {
       google.maps.event.trigger(gmarkers[i], "click");
          function myclick(i) { 
          gmarkers[i].openInfoWindowHtml(htmls[i]);
   }
  
         function tohere(i) {
         gmarkers[i].openInfoWindowHtml(to_htmls[i]);
        }
        function fromhere(i) {
          gmarkers[i].openInfoWindowHtml(from_htmls[i]);
        }
  }
  
  function load() 
        {
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
      center: new google.maps.LatLng( -6.801859, 39.282503),
      mapTypeControl: true,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      navigationControl: true,
          zoom: 15,
          mapTypeId: 'roadmap'
      });
  
      var infoWindow = new google.maps.InfoWindow;
      downloadUrl("mapxml.php", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
  
  for (var i = 0; i &lt; markers.length; i++)
     {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var licence_number = markers[i].getAttribute("Licence_number");
      var phone = markers[i].getAttribute("phone");
      var business_image = markers[i].getAttribute("business_image");
      var type = markers[i].getAttribute("type");
       var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
  
  
          //Creating image and get dirrections from point-to-point
          var image_src= '&lt;div class="info-windows img"&gt;' + "&lt;img src= '"+ business_image +"'/&gt;&lt;/div&gt;'";  
  
          var html ='&lt;div class="info-windows"&gt;' + "&lt;b&gt;" +"&lt;h4&gt;Business Name:&lt;/h4&gt;"+ name + "&lt;/b&gt; &lt;br/&gt;"+"&lt;h4&gt;Address:&lt;/h4&gt;" + address + "&lt;br/&gt;"+"&lt;h4&gt;  Licence Number:&lt;/h4&gt;" + licence_number + " &lt;br/&gt;" + "&lt;h4&gt;Phone:&lt;/h4&gt;" + phone + " &lt;br/&gt;" + image_src  +'&lt;br/&gt;End point address:&lt;form action="http://maps.google.com/maps" method="get"" target="_blank"&gt;' + '&lt;br/&gt;&lt;input type="text" SIZE=40 MAXLENGTH=40            name="daddr" id="daddr" value="" /&gt;&lt;br&gt;' + '&lt;INPUT value="Get Directions" TYPE="SUBMIT"&gt;' + '&lt;input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() + "(" + name + ")" + '"/&gt;&lt;/div&gt;';
  
  
  
  
  
  
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
  </code></pre>
  
  <p>The line var side_bar_html is how I start to create the headings of the display table and afterwards I used the same variable to display the rest of the data.
  I need to know how I can paginate them since all of the data is being displayed now.</p>
  
  <p>This is the html where I display the data.</p>
  
  <pre><code> &lt;table width="99%" align="center"   id="product-table" &gt;
  
  
                      &lt;/table&gt; 
  </code></pre>