title: jQuery pagination results page
body: <p>I created a google maps store locator and im using a jquery pagination to show only 5 results per page. It works. The only problem is that every time I hit search it duplicates the pagination.</p>
  
  <p><img src="https://i.stack.imgur.com/U0ZnD.png" alt="Screen shot 2010-07-05 at 11.54.13 AM.png"></p>
  
  <p>Code: </p>
  
  <pre><code>function paginate(){
  var page = 1;
  var itemsPerPage = 4;
  var prev = "Previous Results";
  var next = "More Results";
  
  var $entries = $("#entries");
  var $list = $entries.children("ul:first");
  $list.children().eq(itemsPerPage).nextAll().andSelf().hide();
  
  var $pagination = $("&lt;ul class='pagination'&gt;&lt;/ul&gt;").each(function () {
     var itemsTotal = $list.children().size();
     var pages = Math.ceil(itemsTotal / itemsPerPage);
  $(this).append("&lt;span class='endline'&gt;&lt;/span&gt;");
     $(this).append("&lt;li class='prev'&gt;" + prev + "&lt;/li&gt;");
     $(this).append("&lt;li class='more'&gt;" + next + "&lt;/li&gt;");
  }).appendTo($entries);
  $pagination.children("li:first").hide();
  $pagination.children().click(function () {
  
     if ($(this).text() == prev)
         page = page - 1;
     else if ($(this).text() == next)
         page = page + 1;
  
     var firstToShow = (page - 1) * itemsPerPage;
     var lastToShow = page * itemsPerPage;
     $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
  
     if (page == 1)
         $(this).parent().find("li:first").hide();
     else
         $(this).parent().find("li:first").show();
     if (page == Math.ceil($list.children().size() / itemsPerPage))
         $(this).parent().find("li:last").hide();
     else
         $(this).parent().find("li:last").show();
  });
  }
  </code></pre>
  
  <p>And then in the google maps javascript I have (code is taken from <a href="http://code.google.com/apis/maps/articles/phpsqlsearch.html" rel="nofollow noreferrer">Creating a Store Locator with PHP, MySQL &amp; Google Maps</a>):</p>
  
  <pre><code>function searchLocationsNear(center) {
  var radius = document.getElementById('radiusSelect').value;
  var searchUrl = 'genxml.php?lat=' + center.lat() + '&amp;lng=' + center.lng() + '&amp;radius=' + radius;
  GDownloadUrl(searchUrl, function(data) {
   var xml = GXml.parse(data);
   var markers = xml.documentElement.getElementsByTagName('marker');
   map.clearOverlays();
  
   var sidebar = document.getElementById('sidebar');
   sidebar.innerHTML = '';
   if (markers.length == 0) {
     sidebar.innerHTML = '&lt;p class="caption"&gt;No results found.&lt;/p&gt;';
     map.setCenter(new GLatLng(40, -100), 4);
     return;
   }
  
   var bounds = new GLatLngBounds();
   for (var i = 0; i &lt; markers.length; i++) {
     var name = markers[i].getAttribute('name');
     var address = markers[i].getAttribute('address');
     var type = markers[i].getAttribute('type');
     var distance = parseFloat(markers[i].getAttribute('distance'));
     var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                             parseFloat(markers[i].getAttribute('lng')));
  
     var marker = createMarker(point, name, address, type);
     map.addOverlay(marker);
     var sidebarEntry = createSidebarEntry(marker, name, address, distance, type);
     sidebar.appendChild(sidebarEntry);
     bounds.extend(point);
   }
  paginate();
  results();
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
   });
       }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="entries"&gt;
  &lt;ul id="sidebar"&gt;
     &lt;li&gt;all the entries&lt;/li&gt;
     &lt;li&gt;all the entries&lt;/li&gt;
     ...etc
  &lt;/ul&gt;
  and then the pagination
  &lt;ul class="pagination"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and on the button there is:</p>
  
  <pre><code>&lt;input type="button" onclick="searchLocations()" class="submit" value="Search"/&gt;
  </code></pre>
  
  <p>and that function is:</p>
  
  <pre><code>function searchLocations() {
  var address = document.getElementById('addressInput').value;
  geocoder.getLatLng(address, function(latlng) {
  if (!latlng) {
  sidebar.innerHTML = '&lt;p class="caption"&gt;&lt;b&gt;No results found.&lt;/b&gt;&lt;br&gt;&lt;br&gt;Please try your search again. Make sure to enter a single city, state, or zip code.&lt;/p&gt;';
   } else {
     searchLocationsNear(latlng);
     filter();
   }
  });
  }
  </code></pre>