我创建了一个谷歌地图商店定位器,我使用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();
}
});
}
答案 0 :(得分:2)
在paginate()
函数中重新创建之前,添加以下行以删除任何现有分页:
$(".pagination").remove();
所以你最终得到:
$(".pagination").remove();
var $pagination = $("<ul class='pagination'></ul>").each(function () {
...
}).appendTo($entries);