我最近将JQuery的simplePagination.js集成到了我的HTML中，我很高兴。一切正常......除了浏览器历史记录的一部分。点击分页中的页码时，我可以看到浏览器的网址栏根据用户所在页面的跟踪而变化。不幸的是，我注意到点击＆＃34; Back＆＃34;在浏览器上，网址确实会更改回上一页，但所选的网站内容和分页编号不会更改。即1 2 3 4 5接下来是分页按钮...如果我按顺序点击它们，我目前正在使用4.如果我点击＆＃34;返回＆＃34;在浏览器上，突出显示的按钮仍为4，与4相关的内容也是如此。它没有变回3.唯一改回3的是网址。
我最初使用此stackoverflow发布＆gt;＆gt;＆gt;使我的代码工作（差不多） How to use SimplePagination jquery
在该帖子中，用户2unco建议了一些代码，然后包含了一个有效的示例。
为方便起见，我将包含我的例子中提到的所有代码：
要分页的HTML内容： （无法弄清楚如何发布html代码，而不将其转换为实际内容） ...请参阅此帖子以获取HTML代码示例。 How to use SimplePagination jquery 建议添加到HTML的javascript：
jQuery(function($) {
// consider adding an id to your table,
// just incase a second table ever enters the picture..?
var items = $("table tbody tr");
var numItems = items.length;
var perPage = 2;
// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();
// now setup your pagination
// you need that .pagination-page div before/after your table
$(".pagination-page").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function(pageNumber) { // this is where the magic happens
// someone changed page, lets hide/show trs appropriately
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide() // first hide everything, then show for the new page
.slice(showFrom, showTo).show();
}
});
});
和simplePagination.js
(function($){
var methods = {
init: function(options) {
var o = $.extend({
items: 1,
itemsOnPage: 1,
pages: 0,
displayedPages: 5,
edges: 2,
currentPage: 0,
hrefTextPrefix: '#page-',
hrefTextSuffix: '',
prevText: 'Prev',
nextText: 'Next',
ellipseText: '…',
cssStyle: 'light-theme',
labelMap: [],
selectOnClick: true,
nextAtFront: false,
invertPageOrder: false,
onPageClick: function(pageNumber, event) {
// Callback triggered when a page is clicked
// Page number is given as an optional parameter
},
onInit: function() {
// Callback triggered immediately after initialization
}
}, options || {});
var self = this;
o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
if (o.currentPage)
o.currentPage = o.currentPage - 1;
else
o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1;
o.halfDisplayed = o.displayedPages / 2;
this.each(function() {
self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
methods._draw.call(self);
});
o.onInit();
return this;
},
selectPage: function(page) {
methods._selectPage.call(this, page - 1);
return this;
},
prevPage: function() {
var o = this.data('pagination');
if (!o.invertPageOrder) {
if (o.currentPage > 0) {
methods._selectPage.call(this, o.currentPage - 1);
}
} else {
if (o.currentPage < o.pages - 1) {
methods._selectPage.call(this, o.currentPage + 1);
}
}
return this;
},
nextPage: function() {
var o = this.data('pagination');
if (!o.invertPageOrder) {
if (o.currentPage < o.pages - 1) {
methods._selectPage.call(this, o.currentPage + 1);
}
} else {
if (o.currentPage > 0) {
methods._selectPage.call(this, o.currentPage - 1);
}
}
return this;
},
getPagesCount: function() {
return this.data('pagination').pages;
},
getCurrentPage: function () {
return this.data('pagination').currentPage + 1;
},
destroy: function(){
this.empty();
return this;
},
drawPage: function (page) {
var o = this.data('pagination');
o.currentPage = page - 1;
this.data('pagination', o);
methods._draw.call(this);
return this;
},
redraw: function(){
methods._draw.call(this);
return this;
},
disable: function(){
var o = this.data('pagination');
o.disabled = true;
this.data('pagination', o);
methods._draw.call(this);
return this;
},
enable: function(){
var o = this.data('pagination');
o.disabled = false;
this.data('pagination', o);
methods._draw.call(this);
return this;
},
updateItems: function (newItems) {
var o = this.data('pagination');
o.items = newItems;
o.pages = methods._getPages(o);
this.data('pagination', o);
methods._draw.call(this);
},
updateItemsOnPage: function (itemsOnPage) {
var o = this.data('pagination');
o.itemsOnPage = itemsOnPage;
o.pages = methods._getPages(o);
this.data('pagination', o);
methods._selectPage.call(this, 0);
return this;
},
_draw: function() {
var o = this.data('pagination'),
interval = methods._getInterval(o),
i,
tagName;
methods.destroy.call(this);
tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');
var $panel = tagName === 'UL' ? this : $('<ul></ul>').appendTo(this);
// Generate Prev link
if (o.prevText) {
methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'});
}
// Generate Next link (if option set for at front)
if (o.nextText && o.nextAtFront) {
methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
}
// Generate start edges
if (!o.invertPageOrder) {
if (interval.start > 0 && o.edges > 0) {
var end = Math.min(o.edges, interval.start);
for (i = 0; i < end; i++) {
methods._appendItem.call(this, i);
}
if (o.edges < interval.start && (interval.start - o.edges != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (interval.start - o.edges == 1) {
methods._appendItem.call(this, o.edges);
}
}
} else {
if (interval.end < o.pages && o.edges > 0) {
var begin = Math.max(o.pages - o.edges, interval.end);
for (i = o.pages - 1; i >= begin; i--) {
methods._appendItem.call(this, i);
}
if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (o.pages - o.edges - interval.end == 1) {
methods._appendItem.call(this, interval.end);
}
}
}
// Generate interval links
if (!o.invertPageOrder) {
for (i = interval.start; i < interval.end; i++) {
methods._appendItem.call(this, i);
}
} else {
for (i = interval.end - 1; i >= interval.start; i--) {
methods._appendItem.call(this, i);
}
}
// Generate end edges
if (!o.invertPageOrder) {
if (interval.end < o.pages && o.edges > 0) {
if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (o.pages - o.edges - interval.end == 1) {
methods._appendItem.call(this, interval.end);
}
var begin = Math.max(o.pages - o.edges, interval.end);
for (i = begin; i < o.pages; i++) {
methods._appendItem.call(this, i);
}
}
} else {
if (interval.start > 0 && o.edges > 0) {
if (o.edges < interval.start && (interval.start - o.edges != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (interval.start - o.edges == 1) {
methods._appendItem.call(this, o.edges);
}
var end = Math.min(o.edges, interval.start);
for (i = end - 1; i >= 0; i--) {
methods._appendItem.call(this, i);
}
}
}
// Generate Next link (unless option is set for at front)
if (o.nextText && !o.nextAtFront) {
methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
}
},
_getPages: function(o) {
var pages = Math.ceil(o.items / o.itemsOnPage);
return pages || 1;
},
_getInterval: function(o) {
return {
start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
};
},
_appendItem: function(pageIndex, opts) {
var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');
pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);
options = {
text: pageIndex + 1,
classes: ''
};
if (o.labelMap.length && o.labelMap[pageIndex]) {
options.text = o.labelMap[pageIndex];
}
options = $.extend(options, opts || {});
if (pageIndex == o.currentPage || o.disabled) {
if (o.disabled) {
$linkWrapper.addClass('disabled');
} else {
$linkWrapper.addClass('active');
}
$link = $('<span class="current">' + (options.text) + '</span>');
} else {
$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
$link.click(function(event){
return methods._selectPage.call(self, pageIndex, event);
});
}
if (options.classes) {
$link.addClass(options.classes);
}
$linkWrapper.append($link);
if ($ul.length) {
$ul.append($linkWrapper);
} else {
self.append($linkWrapper);
}
},
_selectPage: function(pageIndex, event) {
var o = this.data('pagination');
o.currentPage = pageIndex;
if (o.selectOnClick) {
methods._draw.call(this);
}
return o.onPageClick(pageIndex + 1, event);
}
};
$.fn.pagination = function(method) {
// Method calling logic
if (methods[method] && method.charAt(0) != '_') {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.pagination');
}
};
})(jQuery);
它的例子＆＃34;工作＆＃34;在此链接：http://bilalakil.me/bin/simplepagination/
如果你尝试一下，你会看到我的问题。单击第1页，然后单击2，然后单击3.然后单击后退按钮。网址将会更改，但页面上的内容和突出显示的分页按钮将保持不变。
如何解决这个问题？需要修复它，以便在浏览器上按下后退按钮时，内容实际上会更改，而不仅仅是url字符串。
P.S。我在Firefox和Chrome中试过这个。所以我不认为这是一个浏览器问题。
答案 0 :(得分：0)
我看到的是，现在您的当前页面设置为0.这就是为什么虽然内容已更新，但所选页面未突出显示的原因。你可以试试这个 -
var currentPage = $(".pagination-page").pagination().getCurrentPage();
$(".pagination-page").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
currentPage: currentPage,
onPageClick: function(pageNumber) { // this is where the magic happens
// someone changed page, lets hide/show trs appropriately
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide() // first hide everything, then show for the new page
.slice(showFrom, showTo).show();
}
});