Heim > Web-Frontend > js-Tutorial > js+css实现的简单易用兼容好的分页_javascript技巧

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

WBOY
Freigeben: 2016-05-16 17:05:57
Original
1232 Leute haben es durchsucht

效果:
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;
}
});
};
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage