分页器基本是每个网站都会有的一部分组件。例如
image.png
在这里我们进行简化，做出来简化版，效果如下：
image.png
在码代码之前我们还是要看好这个分页器的需求
-
首先这个分页器分为两部分，上面部分是主题内容，上面的主题内容每页最多有三个新闻内容，下面是分页器，点击下面的分页器每个数字可以对应上面每个不同的主题内容页面；
-
每页页码不超过9页，点击的那个页面保持在中间
首先开始HTML页面的搭建<style>
a{
display: block;
border: 1px solid #ececec;
width: 30px;
height: 30px;
float: left;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);
?>
这就是一个简单的分页器，希望大家喜欢
网友评论