首先,需要说明的是,我是 javascript 和 jquery 的新手。
现在,我正在使用 javascript 文件在 div 内分页。该脚本工作正常,但如果有大量数据,那么我需要使用“下一个”和“上一个”标签限制分页链接。我找不到办法做到这一点。目前分页脚本显示所有数字,如 1 2 3 4 5 6 7 8 9
等等取决于提供的数据。但是,我想向他们展示,1 2 3 4 5 next>>
或者,<<prev 2 3 4 5 6 next>>
这是我的 pagination.js
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = "#pagingControls";
this.pagingContainerPath = "#content";
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = "";
for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) {
if (i < this.paragraphs.length) {
var elem = this.paragraphs.get(i);
html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">";
}
}
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = "<b>Pages</b>: <ul>";
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>";
} else {
pagingControls += "<li>" + i + "</li>";
}
}
pagingControls += "</ul>";
$(container).html(pagingControls);
}
}
要获得所需的外观,我该如何编辑此脚本?如果有人可以帮助我,请这样做。
最佳答案
您可以像这样更改 renderControls
:
var renderControls = function(container, currentPage, numPages, pagesCutoff) {
var pagingControls = "<b>Pages</b>: <ul>";
var prevPosition = currentPage - pagesCutoff;
var nextPosition = currentPage + pagesCutoff;
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
if(i >= prevPosition && i <= nextPosition) {
var linkToPage = i == prevPosition ? currentPage - 1 : i == nextPosition ? currentPage + 1 : i;
var linkText = i == prevPosition ? "<< prev" : i == nextPosition ? "next >>" : i;
pagingControls += "<li><a href='#' onclick='pager.showPage(" + linkToPage + "); return false;'>" + linkText + "</a></li>";
}
} else {
pagingControls += "<li>" + i + "</li>";
}
}
pagingControls += "</ul>";
$(container).html(pagingControls);
}
并将其添加到 Imtech.Pager
:this.pageLinksEachSide = 3;
并将 renderControls
调用更改为:renderControls(this.pagingControlsContainer, this.currentPage, this.numPages(), this.pageLinksEachSide);
假设您希望“下一个”链接导航到 currentPage + 1
,“上一个”链接导航到 currentPage - 1
。
关于javascript - 修复 javascript 的分页限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9293443/