Question

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.

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 = $("<ul class='pagination'></ul>").each(function () {
   var itemsTotal = $list.children().size();
   var pages = Math.ceil(itemsTotal / itemsPerPage);
$(this).append("<span class='endline'></span>");
   $(this).append("<li class='prev'>" + prev + "</li>");
   $(this).append("<li class='more'>" + next + "</li>");
}).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();
});
}

And then in the google maps javascript I have (code is taken from Creating a Store Locator with PHP, MySQL & Google Maps):

function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&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 = '<p class="caption">No results found.</p>';
   map.setCenter(new GLatLng(40, -100), 4);
   return;
 }

 var bounds = new GLatLngBounds();
 for (var i = 0; i < 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));
 });
     }

html:

<div id="entries">
<ul id="sidebar">
   <li>all the entries</li>
   <li>all the entries</li>
   ...etc
</ul>
and then the pagination
<ul class="pagination"></ul>
</div>

and on the button there is:

<input type="button" onclick="searchLocations()" class="submit" value="Search"/>

and that function is:

function searchLocations() {
var address = document.getElementById('addressInput').value;
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
sidebar.innerHTML = '<p class="caption"><b>No results found.</b><br><br>Please try your search again. Make sure to enter a single city, state, or zip code.</p>';
 } else {
   searchLocationsNear(latlng);
   filter();
 }
});
}

Answer 1

Add the following line to remove any existing pagination before it is re-created in the paginate() function:

$(".pagination").remove();

So you end up with:

$(".pagination").remove();
var $pagination = $("<ul class='pagination'></ul>").each(function () { 
   ...
}).appendTo($entries);