jQuery pagination results page
<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="http://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">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>
