javascript实现分页

最新推荐文章于 2024-07-01 11:34:43 发布

回_憶

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/angjunqiang/article/details/41620385

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/page_divided.css">
<script type="text/javascript" src="./js/page_divided.js"></script>
<title>Page_Divied</title>
</head>
<body>
     <div id="page">

  </div>
</body>
</html>

二、page_divided.css文件

#page{
	width: 600px;
	height: 400px;
	border: 1px solid green;
	position: absolute;
	margin-top: 100px;
	margin-left: 300px;
	background:#F6F6E7;
}
#page .content{
	height: 120px;
	border-bottom: 1px dashed gray;
}
#page .page_index{
    line-height: 20px;
    text-align: center;
}
#page .page_index a{
	width: 20px;
	text-decoration: none;
	display: inline-block;
	background: gray;
	border-bottom: 1px solid gray;
    margin-top: 7px;
    margin-left: 3px;
    cursor: pointer;
}
#page .content .u_image{
	width: 110px;
	height: 110px;
	border-radius: 20px;
	border: 1px solid gray;
	position: absolute;
	margin-left: 25px;
	margin-top: 4px;
	overflow: hidden;
}
#page .content .u_info{
	border-left: 1px dashed gray;
	position: absolute;
	margin-top: 4px;
	margin-left: 180px;
    width: 300px;
    height: 110px;
}
#page .content .u_info ul{

}
#page .content .u_info ul li{
	list-style: none;
	margin-top: 3px;
	border-bottom: 1px solid solid;
}

二、page_divided.js 文件

//数据集合
var user_infos=[{'image':'page_divided/1.jpg','username':'姚笛','birthdata':'1982年3月17日','personInfo':'姚笛，1982年3月17日出生于浙江省桐乡市'},
              {'image':'page_divided/2.jpg','username':'李敏镐','birthdata':'1987年6月22日','personInfo':'1987年6月22日出生于首尔，韩国男演员、歌手、广告模特.'},
              {'image':'page_divided/3.jpg','username':'杨幂','birthdata':'1986年9月12日','personInfo':'中国女演员、歌手、电视剧制片人。出生于北京.'},
              {'image':'page_divided/4.png','username':'范冰冰','birthdata':'1981年（辛酉年）9月16日','personInfo':'1981年9月16日出生于山东青岛，毕业于上海师范大学谢晋影视艺术学院.'},
              {'image':'page_divided/5.jpg','username':'刘诗诗','birthdata':'1987年3月10日','personInfo':'中国内地影视女演员，出生于北京，毕业于北京舞蹈学院芭蕾舞专业2006届本科班。'},
              {'image':'page_divided/6.jpg','username':'柳岩','birthdata':'1980年11月8日','personInfo':'出生于湖南衡阳，祖籍安徽芜湖.'},
              {'image':'page_divided/7.jpg','username':'张杰','birthdata':'1982年12月20日','personInfo':'出生于四川成都，中国流行歌手。'}
              ];
var pageSize=3;
var pageNum=null;//页码总数
var total=user_infos.length;
  if(total%pageSize == 0){
    pageNum=parseInt(total/pageSize);
  }else{
    pageNum=parseInt(total/pageSize)+1;
  }
window.οnlοad=function(){

      oDiv_page=document.getElementById('page');
      var pageNow=toPage(1,oDiv_page);   
};

//跳转到指定的页面
function toPage (pagenow,obj) {
//分页参数
var pageNow=pagenow;//当前页              
var start=(pageNow-1)*pageSize;//当前页开始编号
var end=pageSize*pageNow;//当前页的结束编号
        if(end>total){
          end=total;
        }
        for(var i=start;i<end;i++){
            var oDiv_con=document.createElement('div');
            var oDiv_img=document.createElement('div');
            var oImg=document.createElement('img');
            var oDiv_info=document.createElement('div');
            var oUl=document.createElement('ul');

            var oLi=document.createElement('li');
            oLi.innerHTML='姓名:'+user_infos[i].username;
            oUl.appendChild(oLi);

            var oLi=document.createElement('li');
            oLi.innerHTML='出生年月:'+user_infos[i].birthdata;
            oUl.appendChild(oLi);

            var oLi=document.createElement('li');
            oLi.innerHTML='个人简介:'+user_infos[i].personInfo;
            oUl.appendChild(oLi);

            oDiv_info.className='u_info';
            oDiv_info.appendChild(oUl);

            oImg.src='./images/'+user_infos[i].image;
            oImg.className='u_image';
            oDiv_img.appendChild(oImg);

            oDiv_con.appendChild(oDiv_img);
            oDiv_con.appendChild(oDiv_info);

            oDiv_con.className='content';
            obj.appendChild(oDiv_con);
        }
           //页数索引 
            var oDiv_pageIndex=document.createElement('div');
            var oA=document.createElement('a');
            oA.innerHTML='<<';
            oDiv_pageIndex.className='page_index';
            oDiv_pageIndex.appendChild(oA);
            for(var j=0;j<pageNum;j++){
                var oA=document.createElement('a');
                oA.href='javascript:;';
                oA.innerHTML=j+1;
                oDiv_pageIndex.appendChild(oA);
            }
            var oA=document.createElement('a');
            oA.href='javascript:;';
            oA.innerHTML='>>';
            oDiv_pageIndex.appendChild(oA);

            obj.appendChild(oDiv_pageIndex);
            
            var oA=document.getElementsByTagName('a');
            oA[pageNow].style.background='yellow';//当前页面突出显示  
            if(pageNow ==1){
              oA[0].style.display='none';
            }else if(pageNow==oA.length-2){
                 oA[oA.length-1].style.display='none';
            }
            var oA=document.getElementsByTagName('a');
            for(var k=0;k<oA.length;k++){
              oA[k].index=k;
              oA[k].οnclick=function(){
                  if(oA[this.index].innerHTML == '<<'){
                        if(pageNow>1){
                          pageNow=pageNow-1;
                          obj.innerHTML='';
                          toPage(pageNow,obj);
                        }else{
                             alert('已经是第一页了');
                        }
                  }else if(oA[this.index].innerHTML == '>>'){
                      //alert(this.innerHTML);
                      if(pageNow<pageNum){
                          pageNow=pageNow+1;
                          obj.innerHTML='';
                          toPage(pageNow,obj);
                      }else{
                          alert('已经是最后一页了')
                      }
                  }else{
                        pageNow=this.index;
                        //删掉oDiv_page所有节点
                        obj.innerHTML='';
                        toPage(pageNow,obj);
                  }  
              }   
          } 
             return pageNow;
  }

效果图

回_憶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现分页

一、html页面Page_Divied 二、page_divided.css页面#page{ width: 600px; height: 400px; border: 1px solid green; position: absolute; margin-top: 100px; margin-left: 300px; background
复制链接

扫一扫

专栏目录