我有一个PHP页面，当使用过滤器或单击分页页面时，我会重新加载一个div。我对分页有问题，因为它只适用于第一次。我认为当div的内容发生变化而不重新加载页面时，我需要重新加载分页脚本。
这是我需要重用的功能：
$('li.page').on('click', function() {
var clicked = $(this).find('a').text();
var paginations = $('ul.pagination');
var previous = paginations.find('li.page.active');
previous.removeClass('active');
var links = paginations.find('li.page');
links.each(function() {
if ($(this).find('a').text() == clicked) {
$(this).addClass('active');
}
});
$('#page').text(clicked);
showItems();
//location.reload(); //aktualizuje celou stránku
});
更新div内容的另一个函数：
function showItems() {
var nazevkat = document.getElementById("nazevkat").innerHTML;
var kategorie = document.getElementById("kategorie").innerHTML;
var podkategorie = document.getElementById("podkategorie").innerHTML;
var razeni = document.getElementById("razeni").value;
vyhledavani = document.getElementById("vyhledavani").innerHTML;
vyhledavani = vyhledavani.replace(/ /gi, "+");
var start = document.getElementById("start-interval-2").value;
var end = document.getElementById("end-interval-2").value;
var vyrobce = $('#vyrobci :checked');
var vyrobci = "";
for (var i = 0; i < vyrobce.length; i++) {
vyrobci += vyrobce[i].value + "+";
}
vyrobci = vyrobci.substring(0, vyrobci.length - 1);
var dostupnosti = $('#dostupnosti :checked');
var dostupnost = "";
for (var i = 0; i < dostupnosti.length; i++) {
dostupnost += dostupnosti[i].value + "+";
}
dostupnost = dostupnost.substring(0, dostupnost.length - 1);
var page = document.getElementById("page").innerHTML;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("page-content-items").innerHTML = xmlhttp.responseText;
}
};
var newUrl = getCutURL(kategorie, podkategorie, razeni, vyhledavani, start, end, vyrobci, dostupnost, nazevkat, page);
history.pushState('', 'Alter URL', newUrl.replace("getItems", "produkty"));
var url = getURL(kategorie, podkategorie, razeni, vyhledavani, start, end, vyrobci, dostupnost, "", page);
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
更改触发器非常有效！
$('.page-content').on('click', 'li.page', function() {
var clicked = $(this).find('a').text();
var paginations = $('ul.pagination');
var previous = paginations.find('li.page.active');
previous.removeClass('active');
var links = paginations.find('li.page');
links.each(function() {
if ($(this).find('a').text() == clicked) {
$(this).addClass('active');
}
});
$('#page').text(clicked);
showItems();
});
也许是解决你的问题
$.fn.myClick= function (callback) {
$(document).on('click', $(this).selector, function(event) { // this (jQuery) method is working
callback($(this));
event.preventDefault();
});
return $;
};
$('li.page').myClick(function($this){
var clicked = $this.find('a').text();
var paginations = $('ul.pagination');
var previous = paginations.find('li.page.active');
previous.removeClass('active');
var links = paginations.find('li.page');
links.each(function() {
if ($this.find('a').text() == clicked) {
$this.addClass('active');
}
});
$('#page').text(clicked);
showItems();
//location.reload(); //aktualizuje celou stránku
});
要使用heavenPG，您需要阅读文档https://github.com/rachmanzz/heavenPG
第一：定义heavenPG构造
var pagination = heavenPG({
id : 'ul.pagination',
total:10, // total page
current:3, // current page active
onclick:function(page){
console.log('current page :'+page); // page number clicked
}
});
pagination.execute();
制作分页列表（使用引导程序组件Lhttp://getbootstrap.com/components/#pagination）
<ul class="pagination">
</ul>
别忘了加载jQuery和boostrap库
示例：http://rachmanzz.github.io/heavenPG/