js+css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)

更新時(shí)間：2013年12月30日 16:01:26 作者：

使用html、js、css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下

效果：

html:

復(fù)制代碼代碼如下:

用法：

復(fù)制代碼代碼如下:

 
var total = 310; 
var pageNo = 1; 
var pageCount = 31;//共有多少頁(yè) 
var pageSize = 10; 
var actionName = "list.action"; 
var otherParam = "&name='www'&order='time'"; 
$(function(){ 
paginate();//分頁(yè)} 
); 

css:

復(fù)制代碼代碼如下:

 
#page{ 
font-size: 14px; 
clear: both; 
padding-top: 1.45em; 
white-space: nowrap; 
} 
#page a{ 
background: white; 
border: 1px solid #E7ECF0; 
display: inline-block; 
height: 22px; 
line-height: 22px; 
margin-right: 5px; 
text-align: center; 
text-decoration: none; 
vertical-align: middle; 
width: 23px; 
} 
#pagePre,#pageNext{ 

} 
.pageCurrent{ 
font-weight: bold; 
} 

js:

復(fù)制代碼代碼如下:

 
function mcPaginate(){ 

var $pageDiv = $("#page"); 

actionName = actionName + "?pageSize="+pageSize; 


if(typeof otherParam != 'undefined' && otherParam != ""){ 
actionName = actionName + otherParam; 
} 

$pageDiv.append("第"+pageNo+"頁(yè)/共"+pageCount+"頁(yè)"); 

//上一頁(yè) 
if(pageNo > 1){ 
var hf = actionName + "&pageNo="+(pageNo-1); 
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"上一頁(yè)"+"</a>"); 
}; 

if(pageCount <= pageSize){ 
for(var i=0; i < pageCount; i++){ 
var hf = actionName + "&pageNo="+(i+1); 
if(pageNo == (i+1)){//當(dāng)前頁(yè) 
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+pageNo+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+(i+1)+"</a>"); 
}; 
}; 
}else{ 
for(var i=0; i < pageSize; i++){ 
var midIndex = 0; 
if(pageSize%2 == 0){ 
midIndex = pageSize/2 - 1; 
}else{ 
midIndex = pageSize/2; 
} 
var num = -midIndex; 
var showPageNum = pageNo+i+num; 


if(showPageNum > 0 && showPageNum <= pageCount){ 

var hf = actionName + "&pageNo="+showPageNum; 
if(pageNo == showPageNum){//當(dāng)前頁(yè) 
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+showPageNum+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>"); 
}; 
}; 
}; 
} 

//下一頁(yè) 
if(pageNo < pageCount){ 
var hf = actionName + "&pageNo="+(pageNo+1); 
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"下一頁(yè)"+"</a>"); 
}; 

$pageDiv.append("轉(zhuǎn)到"+"<input type='text' class='goNum' style='width:30px;' name='goNum'>頁(yè)<input type='button' name='goButton' class='goButton' value='確定'>"); 

$(".goButton").click(function(){ 
var goNum = $(".goNum").val(); 
if(goNum!=""){ 
window.location.href = actionName + "&pageNo="+goNum; 
} 
}); 
}; 

您可能感興趣的文章:

相關(guān)文章

淺談js的異步執(zhí)行
下面小編就為大家?guī)硪黄獪\談js的異步執(zhí)行。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
下面小編就為大家?guī)硪黄狫avaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
JSONP原理及簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了JSONP原理及簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
javascript browser瀏覽器類型以及版本判斷代碼
在團(tuán)隊(duì)js框架建設(shè)過程中寫的一段瀏覽器判斷代碼，喜歡的朋友可以參考下。
2010-04-04
Egg.js構(gòu)建一個(gè)stream流式接口服務(wù)實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Egg.js構(gòu)建一個(gè)stream流式接口服務(wù)實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例
這篇文章主要介紹了js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部的原理與方法,以實(shí)例的形式詳細(xì)分析了js實(shí)現(xiàn)返回頂部功能所涉及的各種技巧,并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)歸納,需要的朋友可以參考下
2014-11-11
JS禁用瀏覽器退格鍵實(shí)現(xiàn)思路及代碼
關(guān)于瀏覽器退格鍵的禁用，可行的方法有很多，在本文將為大家詳細(xì)介紹下在js中時(shí)如何做到的，有需求的各位可以參考下
2013-10-10
有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05
微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
js 表格排序(編輯+拖拽+縮放)
js 表格排序(編輯+拖拽+縮放)實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-05-05