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:
<div id="page"></div>
用法:
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:
#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:
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;
}
});
};
html:
復(fù)制代碼 代碼如下:
<div id="page"></div>
用法:
復(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;
}
});
};
您可能感興趣的文章:
- js前臺(tái)分頁(yè)顯示后端JAVA數(shù)據(jù)響應(yīng)
- 純js分頁(yè)代碼(簡(jiǎn)潔實(shí)用)
- javascript分頁(yè)代碼實(shí)例分享(js分頁(yè))
- js寫(xiě)的評(píng)論分頁(yè)(還不錯(cuò))
- 純js寫(xiě)的分頁(yè)表格數(shù)據(jù)為json串
- js對(duì)文章內(nèi)容進(jìn)行分頁(yè)示例代碼
- js分頁(yè)代碼分享
- jsp分頁(yè)顯示完整實(shí)例
- js分頁(yè)工具實(shí)例
- JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果實(shí)例
- JS實(shí)現(xiàn)當(dāng)前頁(yè)居中分頁(yè)效果的方法
- Jquery+Ajax+Json+存儲(chǔ)過(guò)程實(shí)現(xiàn)高效分頁(yè)
- js腳本分頁(yè)代碼分享(7種樣式)
相關(guān)文章
JavaScript 復(fù)制對(duì)象與Object.assign方法無(wú)法實(shí)現(xiàn)深復(fù)制
這篇文章主要介紹了JavaScript 復(fù)制對(duì)象與Object.assign方法無(wú)法實(shí)現(xiàn)深復(fù)制,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
js實(shí)現(xiàn)的簡(jiǎn)潔網(wǎng)頁(yè)滑動(dòng)tab菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的簡(jiǎn)潔網(wǎng)頁(yè)滑動(dòng)tab菜單效果代碼,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過(guò)tab標(biāo)簽切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對(duì)比)
很多時(shí)候需要用到限制文本框的數(shù)字輸入,試過(guò)許多方法,都不太理想,遂決定自己實(shí)現(xiàn)一個(gè)來(lái)玩玩,接下來(lái)介紹曾經(jīng)使用過(guò)的方法與自定義方法的對(duì)比,感興趣的朋友可以了解下啊2013-01-01
用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

