javascript實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)特效
更新時(shí)間：2015年08月12日 09:25:39 投稿：hebedich
下面給大家匯總的幾個(gè)javascript實(shí)現(xiàn)的分頁(yè)代碼，當(dāng)然必須要結(jié)合后臺(tái)代碼實(shí)現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)?lái)一定的幫助
下面是一段javascript實(shí)現(xiàn)的分頁(yè)代碼，當(dāng)然必須要結(jié)合后臺(tái)代碼實(shí)現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)?lái)一定的幫助,代碼如下:
<script type="text/javascript">
function setPage(opt)
{
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum)
{
return false
}
var allPageNum=opt.allPageNum; //總的頁(yè)數(shù)
var showPageNum=opt.showPageNum; //顯示的頁(yè)數(shù)
var curpageNum=opt.curpageNum; // 當(dāng)前的頁(yè)數(shù)
var pageDIvBox=document.getElementById(opt.pageDivId);
//左邊或右邊顯示頁(yè)碼的個(gè)數(shù)
var lrNum=Math.floor(showPageNum/2);
if(curpageNum>1)
{
var oA=document.createElement('a');
oA.href='#1';
oA.innerHTML='首頁(yè)'
pageDIvBox.appendChild(oA);
}
if(curpageNum>1)
{
var oA=document.createElement('a');
oA.href='#'+(curpageNum-1);
oA.innerHTML='上一頁(yè)'
pageDIvBox.appendChild(oA);
}
if(curpageNum<showPageNum-2||allPageNum==showPageNum)
{
for(var i=1;i<=showPageNum;i++)
{
var oA = document.createElement('a');
oA.href = '#'+i;
if(curpageNum==i)
{
oA.innerHTML = i;
}
else
{
oA.innerHTML = "[" + i + "]";
}
pageDIvBox.appendChild(oA);
}
}
else
{
//倒數(shù)第一頁(yè)的處理
if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1)
{
for(var i=1;i<=showPageNum;i++)
{
console.log((curpageNum - showPageNum + i));
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - (showPageNum-1) + i);
if(curpageNum == (curpageNum - (showPageNum-1) + i))
{
oA.innerHTML = (curpageNum - (showPageNum-1) + i)
}
else
{
oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
//最后一頁(yè)的處理
else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum)
{
for(var i=1;i<=showPageNum;i++)
{
console.log((curpageNum - showPageNum + i));
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - showPageNum + i);
if(curpageNum == (curpageNum - showPageNum + i))
{
oA.innerHTML = (curpageNum - showPageNum + i)
}
else
{
oA.innerHTML = '['+(curpageNum-showPageNum + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
else
{
for(var i=1;i<=showPageNum;i++)
{
var oA = document.createElement('a');
oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i);
if(curpageNum == (curpageNum - (showPageNum-lrNum) + i))
{
oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i)
}
else
{
oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']'
}
pageDIvBox.appendChild(oA);
}
}
}
if(curpageNum<allPageNum)
{
for(var i=1;i<=2;i++)
{
if(i==1)
{
var oA = document.createElement('a');
oA.href='#'+(parseInt(curpageNum)+1);
oA.innerHTML = '下一頁(yè)'
}
else
{
var oA = document.createElement('a');
oA.href='#'+allPageNum;
oA.innerHTML = '尾頁(yè)'
}
pageDIvBox.appendChild(oA);
}
}
var oA = document.getElementsByTagName('a');
//給頁(yè)碼添加點(diǎn)擊事件
for(var i=0;i<oA.length;i++)
{
oA[i].onclick = function(){
//當(dāng)前點(diǎn)的頁(yè)碼
var sHref = this.getAttribute('href').substring(1);
//清空頁(yè)數(shù)顯示
pageDIvBox.innerHTML = '';
setPage({
pageDivId:'page',
showPageNum:5, //顯示的個(gè)數(shù)
allPageNum:10, //總頁(yè)數(shù)
curpageNum:sHref //當(dāng)前頁(yè)數(shù)
})
}
}
}
window.onload=function()
{
setPage({
pageDivId:'page',
showPageNum:5, //顯示的個(gè)數(shù)
allPageNum:10, //總頁(yè)數(shù)
curpageNum:1 //當(dāng)前頁(yè)數(shù)
})
}
</script>
示例二：
<html>
<head>
<style type="text/css">
body{
font-size:12px;
}
</style>
</head>
<body>
<input type="button" value="分頁(yè)" onclick="initializePageNav(1)">
<div id="pageDir"></div>
<script language="JavaScript">
<!--
function initializePageNav(iCurrPage)
{
var iPageSize = 20;
var iProCount = 2121;
var b = ((iProCount%iPageSize)!=0);
var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0);
if (iCurrPage > iPageCount) return false;
iCurrPage = parseInt(iCurrPage);
var sTemp = "";
var sTemp1 = "每頁(yè):"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>條 頁(yè)數(shù):<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"頁(yè)";
var sTemp2 = "<input type=\"text\" id=\"goPageNo\" value=\""+iCurrPage+"\" size=\"3\" /><input type=\"button\" value=\"GO\" onclick=\"initializePageNav($('goPageNo').value);\" />"
if (iProCount==0)
{
sTemp = "<font color='#cccccc'>首頁(yè) 上一頁(yè) 下一頁(yè) 末頁(yè)</font>";
}
else if (iPageCount==1)
{
sTemp = "<font color='#cccccc'>首頁(yè) 上一頁(yè) 下一頁(yè) 末頁(yè)</font>"
}
else if (iPageCount==iCurrPage)
{
sTemp = "<a href='Javascript:initializePageNav(1)'>首頁(yè)</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一頁(yè)</a> <font color='#cccccc'>下一頁(yè) 末頁(yè)</font>"
}
else if (iCurrPage==1)
{
sTemp = "<font color='#cccccc'>首頁(yè) 上一頁(yè) </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁(yè)</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末頁(yè)</a>"
}
else
{
sTemp = "<a href='Javascript:initializePageNav(1)'>首頁(yè)</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一頁(yè)</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁(yè)</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末頁(yè)</a>"
}
$("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ;
CollectGarbage();
}
function $(o)
{
return document.getElementById(o);
}
initializePageNav(1)
//-->
</script>
</body>
</html>
示例三：
實(shí)現(xiàn)的效果是：上一頁(yè)、第一頁(yè)、…（上n個(gè)頁(yè)碼）、n個(gè)頁(yè)碼、…（下n個(gè)頁(yè)碼）、最后一頁(yè)、下一頁(yè)。n可以是奇數(shù)也可以是偶數(shù)，一般都喜歡取奇數(shù)
//總頁(yè)數(shù)，當(dāng)前頁(yè)數(shù)，跳轉(zhuǎn)地址，第一頁(yè)和最后一頁(yè)之間顯示的頁(yè)碼數(shù)量
function pageBar(tp,cp,url,pn){
var str = ‘<ul class=”page”>';
if(tp>1 && cp>1){
var prev = cp-1;
str += ‘<li><a class=”prev” title=”上一頁(yè)” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一頁(yè)</span></a></li> ‘;
}else{
str += ‘<li><a class=”prev” title=”上一頁(yè)” href=”javascript:void(0);”><span>上一頁(yè)</span></a></li> ‘;
}
if(tp>1){
//第一頁(yè)
if(cp==1){
str +=‘<li class=”current”><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘;
}else{
str +=‘<li><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘;
}
if(tp>2){
var pnh = Math.floor(pn/2);
//循環(huán)開始頁(yè)碼
var s = cp-pnh;
if(s<=1){
s = 2;
}
//循環(huán)結(jié)束頁(yè)碼
var e = cp+pnh;
if(e>=tp){
e = tp-1;
}
if(s<=(1+pnh)){
if(tp>(pn+2)){
e = s+(pn-1);
if(e>=tp){
e = tp-1;
}
}else{
s = 2;
}
}
if(e>=(tp-pnh)){
if(tp>(pn+2)){
s = e-(pn-1);
if(s<=1){
s = 2;
}
}else{
e = tp-1;
}
}
if(e<s){
e = s;
}
//第一頁(yè)后的多頁(yè)跳轉(zhuǎn)
if(s>2){
var sp = cp-pn;
if(sp<1){
sp=1;
}
str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”><span>…</span></a></li> ‘;
}
for(var i=s;i<=e;i++){
if(i==cp){
str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘;
}else{
str += ‘<li><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘;
}
}
//最后一頁(yè)前的多頁(yè)跳轉(zhuǎn)
if(e < (tp-1)){
var ep = cp+pn;
if(ep>tp){
ep=tp;
}
str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”><span>…</span></a></li> ‘;
}
}
//最后一頁(yè)
if(cp==tp){
str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘;
}else{
str +=‘<li><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘;
}
}else{
str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘;
}
if(tp>1 && cp<tp){
var next = cp+1;
str += ‘<li><a class=”next” title=”下一頁(yè)” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一頁(yè)</span></a></li>';
}else{
str += ‘<li><a class=”next” title=”下一頁(yè)” href=”javascript:void(0);”><span>下一頁(yè)</span></a></li>';
}
str += ‘</ul>';
return str;
}
//跳轉(zhuǎn)頁(yè)碼，跳轉(zhuǎn)地址
function goPage(cp,url){
window.location.href = url+cp;
}
您可能感興趣的文章:
- Javascript實(shí)現(xiàn)的分頁(yè)函數(shù)
- Javascript實(shí)現(xiàn)的分頁(yè)函數(shù)
- javascript+xml技術(shù)實(shí)現(xiàn)分頁(yè)瀏覽
- javascript 支持頁(yè)碼格式的分頁(yè)類
- javascript 新聞標(biāo)題靜態(tài)分頁(yè)代碼 (無(wú)刷新)
- Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無(wú)縫滾動(dòng)實(shí)現(xiàn)代碼
- javascript分頁(yè)代碼(當(dāng)前頁(yè)碼居中)
- Java(基于Struts2) 分頁(yè)實(shí)現(xiàn)代碼
- java調(diào)用oracle分頁(yè)存儲(chǔ)過程示例
- Java web velocity分頁(yè)宏示例
- 純javascript實(shí)現(xiàn)分頁(yè)(兩種方法)
- JavaMe開發(fā)繪制可自動(dòng)換行文本
- JavaMe開發(fā)繪制文本框TextEdit
- JavaMe開發(fā)自適應(yīng)滾動(dòng)顯示
相關(guān)文章
js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)?lái)一篇js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價(jià)值。一起跟隨小編過來(lái)看看吧，希望對(duì)大家有所幫助2017-11-11
在本篇文章里小編給大家整理了一篇關(guān)于js正則表達(dá)式簡(jiǎn)單校驗(yàn)方法，有需要的朋友們可以參考下。2021-01-01
Easyui Tree獲取當(dāng)前選擇節(jié)點(diǎn)的所有頂級(jí)父節(jié)點(diǎn)
這篇文章主要介紹了Easyui Tree獲取當(dāng)前選擇節(jié)點(diǎn)的所有頂級(jí)父節(jié)點(diǎn),以及easyUI Tree顯示選中節(jié)點(diǎn)的所有父節(jié)點(diǎn)的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-02-02
一覽畫面點(diǎn)擊復(fù)選框后獲取多個(gè)id值的方法
這篇文章主要介紹了在一覽畫面點(diǎn)擊復(fù)選框后獲取多個(gè)id值的方法，前臺(tái)采用js技術(shù)后臺(tái)采用java技術(shù)實(shí)現(xiàn)的，邏輯清晰，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-05-05
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記一：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義分析
這篇文章主要介紹了《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)的原理、定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
使用JS代碼實(shí)現(xiàn)頁(yè)面添加水印的方法詳解
這篇文章主要介紹了使用80 行 JS 代碼實(shí)現(xiàn)頁(yè)面添加水印：文字水印、多行文字水印、圖片水印、文字&圖片水印,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-05-05
本文通過實(shí)例代碼給大家介紹了JS中定位 position 的使用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08
ES6中的rest參數(shù)與擴(kuò)展運(yùn)算符詳解
rest參數(shù)和擴(kuò)展運(yùn)算符都是ES6新增的特性。下面這篇文章主要給大家介紹了關(guān)于ES6中rest參數(shù)與擴(kuò)展運(yùn)算符的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
這篇文章主要介紹了javascript將DOM節(jié)點(diǎn)添加到文檔的方法,對(duì)比分析了javascript的兩種節(jié)點(diǎn)創(chuàng)建的方法,涉及javascript節(jié)點(diǎn)操作及運(yùn)行時(shí)間計(jì)算的相關(guān)技巧,需要的朋友可以參考下2015-08-08
JavaScript工具庫(kù)jscpd檢測(cè)前端代碼重復(fù)度
在前端開發(fā)中,代碼的重復(fù)度是一個(gè)常見的問題,重復(fù)的代碼不僅增加了代碼的維護(hù)成本,還可能導(dǎo)致程序的低效運(yùn)行,為了解決這個(gè)問題,有許多工具和技術(shù)被用來(lái)檢測(cè)和消除代碼重復(fù),其中一個(gè)被廣泛使用的工具就是jscpd2023-10-10