0
최근에 JQuery의 simplePagination.js를 내 HTML에 통합했으며 행복합니다. 모든 것은 작동 중입니다 ... 브라우저의 역사 부분을 제외하고. 페이지 매김의 페이지 번호를 클릭하면 사용자가 어떤 페이지를 사용하고 있는지 추적하여 브라우저의 URL 표시 줄을 볼 수 있습니다. 브라우저에서 '뒤로'를 클릭하면 URL이 이전 페이지로 다시 변경되지만 선택한 웹 사이트의 콘텐츠 및 페이지 번호는 변경되지 않습니다. ie 1 2 3 4 5 다음 페이지 매기기 단추입니다 ... 순서대로 클릭하면 현재 4에 있습니다. 브라우저에서 "뒤로"를 클릭하면 강조 표시된 단추가 여전히 4이므로 관련된 내용도 있습니다 4. 다시 3으로 변경되지 않았습니다. 3으로 다시 변경된 유일한 것은 URL입니다.JQuery simplePagination.js 브라우저 기록
내가 원래이 유래 게시하는 게시물, 사용자 2unco에서 >>>How to use SimplePagination jquery
으로 (거의) 작업 내 코드를 가지고, 몇 가지 코드를 제안하고 그것을 작동의 예를 포함.
HTML 콘텐츠 페이지 매김하기 : (html 코드를 게시하는 방법을 알아낼 수 없습니다, 그것은 실제 내용을 번역하지 않고)
편의를 위해, 내 예를 들어이 언급 한 모든 코드가 포함됩니다. .. HTML 코드 예를 보려면이 게시물을 참조하십시오. How to use SimplePagination jquery 제안 자바 스크립트는 HTML에 추가 :
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);
"작업"그것의 예는이 링크에 있습니다 : http://bilalakil.me/bin/simplepagination/
당신이 그것을 밖으로 시도하는 경우 내 문제가 나타납니다. 페이지 1, 2, 3을 차례로 클릭 한 다음 뒤로 버튼을 클릭하십시오. URL은 변경되지만 강조 표시된 페이지 및 페이지 매김 단추의 내용은 동일하게 유지됩니다.
어떻게이 문제를 해결할 수 있습니까? 브라우저에서 뒤로 버튼을 누르면 URL 문자열뿐 아니라 내용이 실제로 변경되도록 수정해야합니다.
P. 나는 파이어 폭스와 크롬에서 이것을 시도했다. 그래서 나는 그것의 브라우저 문제를 생각하지 않는다.
어떻게 작동하는지 이해가되면 뒤로 버튼이 제대로 작동하지 않습니다. 페이지 번호는 단순히 페이지 번호를 클릭하여 목록의 레코드를 보이거나 숨기는 것입니다. 1) 당신은 뒤로 버튼 클릭을 듣고 prevPage()를 시작하거나 페이지 새로 고침을 할 수 있습니다. . . 2) 페이지 번호의 쿠키에 nextPage() 또는 prevPage()를 트리거 할 때마다 페이지 번호가 초기화 될 때이 쿠키를 읽고 이에 따라 표시합니다. – Jianhong