javascript實現(xiàn)簡單的分頁特效
更新時間：2015年08月12日 09:25:39 投稿：hebedich
下面給大家匯總的幾個javascript實現(xiàn)的分頁代碼，當(dāng)然必須要結(jié)合后臺代碼實現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)硪欢ǖ膸椭?/div>
下面是一段javascript實現(xiàn)的分頁代碼，當(dāng)然必須要結(jié)合后臺代碼實現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)硪欢ǖ膸椭?代碼如下:
<script type="text/javascript">
function setPage(opt)
{
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum)
{
return false
}
var allPageNum=opt.allPageNum; //總的頁數(shù)
var showPageNum=opt.showPageNum; //顯示的頁數(shù)
var curpageNum=opt.curpageNum; // 當(dāng)前的頁數(shù)
var pageDIvBox=document.getElementById(opt.pageDivId);
//左邊或右邊顯示頁碼的個數(shù)
var lrNum=Math.floor(showPageNum/2);
if(curpageNum>1)
{
var oA=document.createElement('a');
oA.href='#1';
oA.innerHTML='首頁'
pageDIvBox.appendChild(oA);
}
if(curpageNum>1)
{
var oA=document.createElement('a');
oA.href='#'+(curpageNum-1);
oA.innerHTML='上一頁'
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ù)第一頁的處理
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);
}
}
//最后一頁的處理
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 = '下一頁'
}
else
{
var oA = document.createElement('a');
oA.href='#'+allPageNum;
oA.innerHTML = '尾頁'
}
pageDIvBox.appendChild(oA);
}
}
var oA = document.getElementsByTagName('a');
//給頁碼添加點擊事件
for(var i=0;i<oA.length;i++)
{
oA[i].onclick = function(){
//當(dāng)前點的頁碼
var sHref = this.getAttribute('href').substring(1);
//清空頁數(shù)顯示
pageDIvBox.innerHTML = '';
setPage({
pageDivId:'page',
showPageNum:5, //顯示的個數(shù)
allPageNum:10, //總頁數(shù)
curpageNum:sHref //當(dāng)前頁數(shù)
})
}
}
}
window.onload=function()
{
setPage({
pageDivId:'page',
showPageNum:5, //顯示的個數(shù)
allPageNum:10, //總頁數(shù)
curpageNum:1 //當(dāng)前頁數(shù)
})
}
</script>
示例二：
<html>
<head>
<style type="text/css">
body{
font-size:12px;
}
</style>
</head>
<body>
<input type="button" value="分頁" 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 = "每頁:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>條 頁數(shù):<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"頁";
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'>首頁 上一頁 下一頁 末頁</font>";
}
else if (iPageCount==1)
{
sTemp = "<font color='#cccccc'>首頁 上一頁 下一頁 末頁</font>"
}
else if (iPageCount==iCurrPage)
{
sTemp = "<a href='Javascript:initializePageNav(1)'>首頁</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一頁</a> <font color='#cccccc'>下一頁 末頁</font>"
}
else if (iCurrPage==1)
{
sTemp = "<font color='#cccccc'>首頁 上一頁 </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末頁</a>"
}
else
{
sTemp = "<a href='Javascript:initializePageNav(1)'>首頁</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一頁</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末頁</a>"
}
$("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ;
CollectGarbage();
}
function $(o)
{
return document.getElementById(o);
}
initializePageNav(1)
//-->
</script>
</body>
</html>
示例三：
實現(xiàn)的效果是：上一頁、第一頁、…（上n個頁碼）、n個頁碼、…（下n個頁碼）、最后一頁、下一頁。n可以是奇數(shù)也可以是偶數(shù)，一般都喜歡取奇數(shù)
//總頁數(shù)，當(dāng)前頁數(shù)，跳轉(zhuǎn)地址，第一頁和最后一頁之間顯示的頁碼數(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=”上一頁” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一頁</span></a></li> ‘;
}else{
str += ‘<li><a class=”prev” title=”上一頁” href=”javascript:void(0);”><span>上一頁</span></a></li> ‘;
}
if(tp>1){
//第一頁
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)開始頁碼
var s = cp-pnh;
if(s<=1){
s = 2;
}
//循環(huán)結(jié)束頁碼
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;
}
//第一頁后的多頁跳轉(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> ‘;
}
}
//最后一頁前的多頁跳轉(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> ‘;
}
}
//最后一頁
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=”下一頁” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一頁</span></a></li>';
}else{
str += ‘<li><a class=”next” title=”下一頁” href=”javascript:void(0);”><span>下一頁</span></a></li>';
}
str += ‘</ul>';
return str;
}
//跳轉(zhuǎn)頁碼，跳轉(zhuǎn)地址
function goPage(cp,url){
window.location.href = url+cp;
}
您可能感興趣的文章:
- Javascript實現(xiàn)的分頁函數(shù)
- Javascript實現(xiàn)的分頁函數(shù)
- javascript+xml技術(shù)實現(xiàn)分頁瀏覽
- javascript 支持頁碼格式的分頁類
- javascript 新聞標(biāo)題靜態(tài)分頁代碼 (無刷新)
- Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動實現(xiàn)代碼
- javascript分頁代碼(當(dāng)前頁碼居中)
- Java(基于Struts2) 分頁實現(xiàn)代碼
- java調(diào)用oracle分頁存儲過程示例
- Java web velocity分頁宏示例
- 純javascript實現(xiàn)分頁(兩種方法)
- JavaMe開發(fā)繪制可自動換行文本
- JavaMe開發(fā)繪制文本框TextEdit
- JavaMe開發(fā)自適應(yīng)滾動顯示
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局之柵格系統(tǒng)，小編對Bootstrap柵格系統(tǒng)（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下
2016-06-06 這篇文章主要介紹了JavaScript設(shè)計模式之抽象工廠模式介紹,抽象工廠模式就是對功能類單獨創(chuàng)建工廠類,這樣就不必修改之前的代碼,又?jǐn)U展了功能,需要的朋友可以參考下
2014-12-12 這篇文章主要介紹了js控制文本框只輸入數(shù)字和小數(shù)點的方法,實例分析了javascript使用正則表達式實現(xiàn)限制數(shù)字和小數(shù)點的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03 微信 jssdk 簽名錯誤invalid signature的解決方法
這篇文章主要介紹了微信 jssdk 簽名錯誤invalid signature的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01 需要展示多個checkbox復(fù)選框，而只能允許最多選6個,下面為大家介紹下如何使用js限制checkbox選中個數(shù),需要的朋友可以參考下
2014-07-07 Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)
這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)的相關(guān)資料,需要的朋友可以參考下
2016-05-05 js以對象為索引的關(guān)聯(lián)數(shù)組
在代碼邏輯中更多的是用關(guān)聯(lián)數(shù)組的方式。但即使是這樣我們也很少使用對象類型作為鍵值對的鍵名。
2010-07-07 經(jīng)?？吹讲簧賹?dǎo)航網(wǎng)站測樣式或js文件后面加了一些參數(shù)，主要是一你為一些并不經(jīng)常更新的頁面重新加載新修改的文件。
2010-01-01 這篇文章主要介紹了JS如何實現(xiàn)手機端輸入驗證碼效果,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05