Javascript实现的分页函数

2019-04-04 07:59:08来源：爱站网阅读 ()

公司开启新的项目的时候，有时候会让程序员制作很多网站分页，这种效果实现起来其实是比较麻烦的，下述文章是爱站技术频道小编和大家分享的Javascript实现的分页函数。

/**
?*?分页类构造
?*?参数?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\\]/,";
??output?+=?"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);
}