公司開啟新的項目的時候,有時候會讓程序員制作很多網站分頁,這種效果實現起來其實是比較麻煩的,下述文章是錯新技術頻道小編和大家分享的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);
}
上面是錯新技術頻道小編整理的Javascript實現的分頁函數,希望對你學習Javascript的知識有幫助,同時希望您可以繼續支持錯新技術頻道!
新聞熱點
疑難解答
圖片精選