jQuery分页结果页面

Question

我创建了一个谷歌地图存储定位器和即时通讯使用jquery分页，每页只显示5个结果。有用。唯一的问题是，每次我搜索它重复分页。

代码：

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(); 
}); 
} 

然后在谷歌地图的JavaScript我有（代码从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> 

，按钮上有：

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

和功能是：

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

添加以下行，以消除任何现有的分页中paginate()功能是重新创建之前：

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

所以你最终获得：

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