Js 分页

2653

有时候我们的项目往往不需要后台处理,但是要有一个分页的,所以利用JS分页是最好的选择咯。下面我们就来实现以下吧:

HTML代码部分:

<div id="containet">
<ul id="pageMain">
    <li>这是内容标题 第1条</li>
        <li>这是内容标题 第2条</li>
        <li>这是内容标题 第3条</li>
        <li>这是内容标题 第4条</li>
        <li>这是内容标题 第5条</li>
        <li>这是内容标题 第6条</li>
        <li>这是内容标题 第7条</li>
        <li>这是内容标题 第8条</li>
        <li>这是内容标题 第9条</li>
        <li>这是内容标题 第10条</li>
        <li>这是内容标题 第11条</li>
        <li>这是内容标题 第12条</li>
        <li>这是内容标题 第13条</li>
        <li>这是内容标题 第14条</li>
        <li>这是内容标题 第15条</li>
        <li>这是内容标题 第16条</li>
        <li>这是内容标题 第17条</li>
        <li>这是内容标题 第18条</li>
        <li>这是内容标题 第19条</li>
        <li>这是内容标题 第20条</li>
        <li>这是内容标题 第21条</li>
        <li>这是内容标题 第22条</li>
        <li>这是内容标题 第23条</li>
        <li>这是内容标题 第24条</li>
        <li>这是内容标题 第25条</li>
        <li>这是内容标题 第26条</li>
        <li>这是内容标题 第27条</li>
        <li>这是内容标题 第28条</li>
        <li>这是内容标题 第29条</li>
        <li>这是内容标题 第30条</li>
    </ul>
    <div id="pageBox">
    <span id="prev">上一页</span>
        <ul id="pageNav">
        </ul>
        <span id="next">下一页</span>
    </div>
</div>

CSS代码样式:

<style type="text/css">
div,ul,li,body { margin: 0; padding: 0; font-size: 12px; }
#containet {
display: inline-block;
border: 1px solid #e1dede;
padding: 19px;
margin: auto;
}
#pageMain li {
list-style: none;
line-height: 22px;
}
#pageBox { padding: 10px 0 0 0; }
#pageBox span {
display: inline-block;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
color: #fff;
background: #08a586;
}
#pageNav { display: inline-block; }
#pageNav a {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
color: #08a586;
text-decoration:none;
}
#pageNav a.active,
#pageNav a:hover {
background: #08a586;
color: #fff;
}
</style>

JS代码部分:

<script>
window.onload = function(){
tabPage({
pageMain : 'pageMain',
pageNav : 'pageNav',
pagePrev: 'prev',
pageNext: 'next',
curNum: 7,      //每页显示的条数
activeClass: 'active',   //高光显示的class
ini: 0    //初始化显示的页面
});
function tabPage(tabPage){
var pageMain = document.getElementById(tabPage.pageMain);   //获取内容列表
var pageNav = document.getElementById(tabPage.pageNav);     //获取分页
var pagePrev = document.getElementById(tabPage.pagePrev);   //上一页
var pageNext = document.getElementById(tabPage.pageNext);   //下一页
var curNum = tabPage.curNum;                                //每页显示数
var len = Math.ceil(pageMain.children.length / curNum);     //计算总页数
var pageList = '';                                          //生成页码
var iNum = 0;                                               //当前的索引值index
for(var i = 0; i < len; i++){
pageList+='<a href="javascript:;">'+ ( i + 1)+'</a>';
}
pageNav.innerHTML = pageList;
pageNav.children[0].className = tabPage.activeClass;        //头一页加高亮显示
for(var i = 0; i < pageNav.children.length; i++){
pageNav.children[i].index = i;
pageNav.children[i].onclick = function(){
for(var t = 0; t < pageNav.children.length; t++){
pageNav.children[t].className = '';
}
this.className = tabPage.activeClass;
iNum = this.index;
ini(iNum);
};
}
//下一页
pageNext.onclick = function(){
if(iNum == len - 1){
alert('已经是最后一页');
return false;
}else{
for(var t = 0; t < pageNav.children.length; t++){
pageNav.children[t].className = '';
}
iNum++;
pageNav.children[iNum].className = tabPage.activeClass;
ini(iNum);
}
};
//上一页
pagePrev.onclick = function(){
if(iNum == 0){
alert('当前是第一页');
return false;
}else{
for(var t = 0; t < pageNav.children.length; t++){
pageNav.children[t].className = '';
}
iNum--;
pageNav.children[iNum].className = tabPage.activeClass;
ini(iNum);
}
};
function ini(iNum){
for(var i = 0; i < pageMain.children.length; i++){
pageMain.children[i].style.display = 'none';
}
for(var i = 0; i < curNum; i++){
if(pageMain.children[(iNum * curNum + i)] == undefined){ continue; }
pageMain.children[(iNum * curNum + i)].style.display = 'block';
}
}
ini(iNum);
}
};
</script>

文章转载于:http://www.w3cfuns.com/notes/14900/4a3123b6b11fce568890483e5551fa6e.html