js实现分页

JavaScript019

js实现分页,第1张

然后计算出一共分为几页

计算开始显示的行数,和最后显示的行数

遍历显示数据实现分页

实现最下方的显示,第几页,上一页,下一页

当前页为第一页时,上一页没有点击事件

当前页为最后一页时,下一页没有点击事件

否则,上一页和下一页均可使用,点击某一页会跳转到那一页

到此,分页效果已经实现了。

主要思路:就是点击当前页时,它自己显示,其它的都隐藏;

下面是简单的代码实现:

<style>    

input.active {background:yellow}    

div {width:200px height:200px border:1px solid red display:none}    

div.active {display:block}    

</style>    

<script>    

window.onload=function(){    

var aBtn = document.getElementsByTagName('input')    

var aDiv = document.getElementsByTagName('div')    

    

for(var i =0 i<aBtn.lengthi++)    

{    

(function(index){    //因为要存储点击的下标,所以需要做一个参数引入。学名叫'自执行匿名函数'。

aBtn[i].onclick=function(){   

        //这个for循环的作用是将所以的都隐藏。 

for(var i =0 i<aBtn.lengthi++)    

{    

aBtn[i].className=''    

aDiv[i].className=''    

}    

//这是将当前点击的显示。

this.className='active'    

aDiv[index].className='active'    

}    

})(i)    

}    

}    

</script>    

</head>    

<body>    

<input type="button" value="111" class='active' />    

<input type="button" value="222" />    

<input type="button" value="333" />    

<div class="active">11111111111</div>    

<div>22222222222</div>    

<div>33333333333</div>    

</body>