纯前端分页

最新推荐文章于 2023-05-15 14:44:55 发布

Honey-回忆天明

最新推荐文章于 2023-05-15 14:44:55 发布

阅读量270

点赞数

分类专栏：前端 javascript 文章标签： javascript 前端分页

本文链接：https://blog.csdn.net/Honey_tianming/article/details/107281594

版权

javascript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

	<style>
       *{padding: 0;margin: 0;}
       ul{width: 500px;margin:0 auto;}
       ul li{list-style: none;text-align:center;}
       #bottom{
       	width: 500px;
       	margin:0 auto;
       	text-align:center;
       }
       #bottom a{
       	display: inline-block;
       	width: 30px;
       	height: 30px;
       	border:1px solid #ccc;
       	text-align:center;
       	line-height: 30px;
       	text-decoration: none;
       	margin-left: 10px;
       }
    </style>

<body>
	<ul id="box"></ul>
	<div id="bottom"></div>
</body>

<script>
    var data=[
       {"name":'这是一个神奇的国度1'},
       {"name":'这是一个神奇的国度2'},
       {"name":'这是一个神奇的国度3'},
       {"name":'这是一个神奇的国度4'},
       {"name":'这是一个神奇的国度5'},
       {"name":'这是一个神奇的国度6'},
       {"name":'这是一个神奇的国度7'},
       {"name":'这是一个神奇的国度8'},
       {"name":'这是一个神奇的国度9'},
       {"name":'这是一个神奇的国度10'},
       {"name":'这是一个神奇的国度11'},
       {"name":'这是一个神奇的国度12'},
       {"name":'这是一个神奇的国度13'},
       {"name":'这是一个神奇的国度14'},
       {"name":'这是一个神奇的国度15'},
       {"name":'这是一个神奇的国度16'},
       {"name":'这是一个神奇的国度17'},
       {"name":'这是一个神奇的国度18'},
       {"name":'这是一个神奇的国度19'},
       {"name":'这是一个神奇的国度20'},
    ]

    var box=document.getElementById('box');
    var bottom=document.getElementById('bottom');
    var a=bottom.getElementsByTagName('a');

    var pagesize=5;//每页数量
    var currentPage=1;//当前页
    var showdata=data.slice(0,pagesize);
    showData(showdata)//初始化第一页
    var pageTotal =Math.ceil( data.length / pagesize );//向上取整 得到总页码
    var str='';
    for(var i=0;i<pageTotal;i++){
      str+='<a href="javascript:void(0);"  onclick="getData('+(i+1)+')">'+(i+1)+'</a>';
    	bottom.innerHTML='<a href="javascript:void(0);" onclick="prev()">'+'<'+'</a>'+str+'<a href="javascript:void(0);" onclick="next()">'+'>'+'</a>'
    }
   a[1].style.background='red';
    //点击获取数据
    function getData(i){
    currentPage=i;
    var showdata=data.slice((i-1)*pagesize,i*pagesize);
    showData(showdata)
    for(var j=0;j<a.length;j++){
      if(j==i){
        a[j].style.background='red';
      }else{
        a[j].style.background='';
      }
    }
   }
   //展示的数据
    function showData(showdata){
      box.innerHTML='';
    	showdata.map((item,index)=>{
    	 box.innerHTML+='<li>'+item.name+'</li>';
       })
    }
    //上一页
    function prev(){
      var prev=currentPage-1;
      if(prev<1){
        prev=1;
      } 
      var showdata=data.slice((prev-1)*pagesize,prev*pagesize);
      showData(showdata)
       for(var j=0;j<a.length;j++){
          if(j==prev){
            a[j].style.background='red';
          }else{
            a[j].style.background='';
          }
        }
      currentPage=prev;
    }
    //下一页
    function next(){
      var next=currentPage+1;
      if(next>pageTotal){
        next=pageTotal;
      } 
      var showdata=data.slice((next-1)*pagesize,next*pagesize);
      showData(showdata)
       for(var j=0;j<a.length;j++){
          if(j==next){
            a[j].style.background='red';
          }else{
            a[j].style.background='';
          }
        }
      currentPage=next;
    }
</script>

效果图
在这里插入图片描述

Honey-回忆天明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯前端分页

<style> *{padding: 0;margin: 0;} ul{width: 500px;margin:0 auto;} ul li{list-style: none;text-align:center;} #bottom{ width: 500px; margin:0 auto; text-align:center; } #bottom a{ .
复制链接

扫一扫