js+css实现的简单易用兼容好的分页_Javascript教程-查字典教程网
js+css实现的简单易用兼容好的分页
js+css实现的简单易用兼容好的分页
发布时间:2017-01-14 来源:查字典编辑
摘要:效果:html:复制代码代码如下:用法:复制代码代码如下:vartotal=310;varpageNo=1;varpageCount=31;...

效果:

html:

复制代码 代码如下:

<div id="page"></div>

用法:

复制代码 代码如下:

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("<a href='"+hf+"'>"+"上一页"+"</a>");

};

if(pageCount <= pageSize){

for(var i=0; i < pageCount; i++){

var hf = actionName + "&pageNo="+(i+1);

if(pageNo == (i+1)){//当前页

$pageDiv.append("<a href='"+hf+"'>"+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){//当前页

$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>");

}else{

$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>");

};

};

};

}

//下一页

if(pageNo < pageCount){

var hf = actionName + "&pageNo="+(pageNo+1);

$pageDiv.append("<a href='"+hf+"'>"+"下一页"+"</a>");

};

$pageDiv.append("转到"+"<input type='text' name='goNum'>页<input type='button' name='goButton' value='确定'>");

$(".goButton").click(function(){

var goNum = $(".goNum").val();

if(goNum!=""){

window.location.href = actionName + "&pageNo="+goNum;

}

});

};

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类