分页器简化版

分页器基本是每个网站都会有的一部分组件。例如

image.png

在这里我们进行简化，做出来简化版，效果如下：

image.png

在码代码之前我们还是要看好这个分页器的需求

首先这个分页器分为两部分，上面部分是主题内容，上面的主题内容每页最多有三个新闻内容，下面是分页器，点击下面的分页器每个数字可以对应上面每个不同的主题内容页面；

每页页码不超过9页，点击的那个页面保持在中间
首先开始HTML页面的搭建

         text-decoration: none;
         text-align: center;
         line-height: 30px;
     }
     ul {
         height: 306px;
         padding-left: 0;
         margin: 0;
     }
     li{
         float: left;
         list-style: none;
         width: 100%;
         height: 100px;
         line-height: 100px;
         border: 1px solid black;
         text-align: center;
         
     }
     #content{
         width: 480px;
         height: 306px;
         
     }
     #pagenav{
         margin-left: 80px;
         color: blue;
         text-align: center;
     }
     
 </style>
 </head>
 <body>
 <div id="content">
     <!--新闻区域-->
     <ul>
         <li>新闻0</li>
         <li>新闻1</li>
         <li>新闻2</li>
     </ul>
 </div>
 <!--页码导航-->
 <div id="pagenav">
     
 </div>
 </body>

然后开始JS部分

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var totalNum = 200;
    var pageSize = 3;
    var totalPage = Math.ceil(totalNum / pageSize);//设置总页面
    createNav(5);

封装一个方法创建页码导航栏；并定义他们页码开始和结束的地方

    function createNav(pageIndex) {
        pageIndex = parseInt(pageIndex);
        var start = pageIndex -4>0?pageIndex-4:1;
        var end = pageIndex + 4>totalPage?totalPage:pageIndex+4;
        end = end-start<8?start+8>totalPage?totalPage:start+8:end;
        if(end==totalPage){
            start=totalPage-8>0?totalPage-8:1;
        }
        document.getElementById("pagenav").innerHTML ="";
        for(var i=start;i<=end;i++){
            var a = document.createElement("a");
            a.innerHTML = i;
            a.dataset.page = i;
            a.onclick = ViewNews;
            document.getElementById('pagenav').appendChild(a);
        }
    }

封装一个方法将后台传送来的数据输出到新闻内容栏中

function createNews(data){
        var news ="";
        for(i in data){
            news+="<li>"+data[i][0]+"</li>";
        }
        document.getElementById("content").innerHTML = news;
    }

封装一个点击方法，将点击的页码传给后台，点击页码对应相应的主题界面

    function ViewNews(){
        var pageIndex =this.dataset.page;
        createNav(pageIndex);
        $.ajax({
            url:"分页.php",
            type:"get",
            data:{pageIndex:pageIndex},
            dataType:"json",
            success:function(data){
                createNews(data);
            }
        })
    }
</script>

前台的部分完成，开始后台的数据处理，创立200个新闻内容栏，并输出到前台

<?php
$news =array();
for($i=0;$i<200;$i++){
    $news[]=array("新闻$i");
}
$pageIndex=(empty($_GET['pageIndex']))?1:intval($_GET['pageIndex']);
$pageSize = 3;
$start = ($pageIndex -1)*$pageSize;
$outNews = array();
for($i=0;$i<3;$i++){
    if(!empty($news[$start+$i])){
        $outNews[] = $news[$start+$i];
    }
}
echo json_encode($outNews);
?>

这就是一个简单的分页器，希望大家喜欢

分页器简化版

推荐阅读更多精彩内容