JavaScript 实现的分页函数

作者:代码拾荒

时间:2026-10-28

浏览:373

本文介绍了一个基于 JavaScript 的分页函数实现。该函数通过构造函数接收总条数、每页显示条数、当前页码及链接模板等参数,计算总页数并生成包含页码下拉框和首页、上一页、下一页、尾页链接的 HTML 表格。代码直接输出到页面,适用于简单的客户端分页场景。

文章目录

JavaScript 分页函数实现

来源:IECN.Net;作者:钟钟



/**

分页类构造函数说明


参数 nTotalList:表示数据总条数


参数 nPageSize:定义每页显示的记录条数


参数 nPageNum:指定当前所在的页码


参数 sPageUrl:分页链接的 URL 模板,其中页码位置以 [pn] 占位符表示,生成时会替换为实际页码


参数 nPageListSize:可选参数,用于控制页码下拉列表中显示的最大页码数量,默认值为 100


 */

function Pagination(nTotalList, nPageSize, nPageNum, sPageUrl, nPageListSize) {


this.totalList = nTotalList;


this.pageSize = nPageSize;


this.pageNum = nPageNum;


if (nTotalList == 0)


this.totalPages = 1;


else


this.totalPages = Math.floor((this.totalList-1)/this.pageSize + 1);


this.pageUrl = sPageUrl;


if (arguments[4])


this.pageListSize = nPageListSize;


else


this.pageListSize = 100;


}

/**

生成分页 HTML 并直接输出到页面


该方法无输入参数


该方法无返回值


 */

Pagination.prototype.generate = function() {


var output = "";


output += "<table width=\"98%\" cellspacing=\"1\" cellpadding=\"3\" align=\"center\"><tr><td align=\"right\">";


output += "共 " + this.totalList + " 条 每页 " + this.pageSize + " 条 当前第 ";


output += "<select onchange=\"if(this.value)location.href='" + this.pageUrl + "'.replace(/\\[pn\\]/,";


this.value);\" align=\"absMiddle\" style=\"font:normal 9px Verdana,Arial,宋体;\">";


var firstPage = this.pageNum - Math.floor(this.pageListSize/2);


if (firstPage < 1)


firstPage = 1;


var lastPage = firstPage + this.pageListSize - 1;


if (lastPage > this.totalPages) {


lastPage = this.totalPages;


firstPage = lastPage - this.pageListSize + 1;


if (firstPage < 1)


firstPage = 1;


  }

if (firstPage > 1) {


output += "<option value=\"1\">1</option>";


if (firstPage > 2)


output += "<option value=\"\">…</option>";


  }

for (var p = firstPage; p <= lastPage; p++) {


output += "<option value=\"" + p + "\"";


if (p == this.pageNum)


output += " selected=\"yes\"";


output += ">" + p + "</option>";


  }

if (lastPage < this.totalPages) {


if (lastPage < this.totalPages - 1)


output += "<option value=\"\">…</option>";


output += "<option value=\"" + this.totalPages + "\">" + this.totalPages + "</option>";


  }

if (this.pageNum > this.totalPages)


output += "<option value=\"\" selected=\"yes\">页码超出范围</option>";


output += "</select>";


output += "/" + this.totalPages + " 页 ";


if (this.pageNum == 1) {


output += "[首页] ";


output += "[上页] ";


  }

else {


output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, "1") + "\">[首页]</a> ";


output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, this.pageNum-1) + "\">[上页]</a> ";


  }

if (this.pageNum == this.totalPages) {


output += "[下页] ";


output += "[尾页]";


  }

else {


output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, this.pageNum+1) + "\">[下页]</a> ";


output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, this.totalPages) + "\">[尾页]</a> ";


  }

output += "</td></tr></table>";


document.writeln(output);


}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章