Maison > interface Web > js tutoriel > js+css实现的简单易用兼容好的分页_javascript技巧

js+css实现的简单易用兼容好的分页_javascript技巧

WBOY
Libérer: 2016-05-16 17:05:57
original
1233 Les gens l'ont consulté

效果:
js+css实现的简单易用兼容好的分页_javascript技巧 
html:

复制代码 代码如下:



用法:
复制代码 代码如下:

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

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+"页/共"+pageCount+"页");

//上一页
if(pageNo > 1){
var hf = actionName + "&pageNo="+(pageNo-1);
$pageDiv.append(""+"上一页"+"");
};

if(pageCount for(var i=0; i var hf = actionName + "&pageNo="+(i+1);
if(pageNo == (i+1)){//当前页
$pageDiv.append(""+pageNo+"");
}else{
$pageDiv.append(""+(i+1)+"");
};
};
}else{
for(var i=0; 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
var hf = actionName + "&pageNo="+showPageNum;
if(pageNo == showPageNum){//当前页
$pageDiv.append(""+showPageNum+"");
}else{
$pageDiv.append(""+showPageNum+"");
};
};
};
}

//下一页
if(pageNo var hf = actionName + "&pageNo="+(pageNo+1);
$pageDiv.append(""+"下一页"+"");
};

$pageDiv.append("转到"+"");

$(".goButton").click(function(){
var goNum = $(".goNum").val();
if(goNum!=""){
window.location.href = actionName + "&pageNo="+goNum;
}
});
};
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal