分頁器基本是每個網(wǎng)站都會有的一部分組件。例如
image.png
在這里我們進行簡化，做出來簡化版，效果如下：
image.png
在碼代碼之前我們還是要看好這個分頁器的需求
首先這個分頁器分為兩部分，上面部分是主題內(nèi)容，上面的主題內(nèi)容每頁最多有三個新聞內(nèi)容，下面是分頁器，點擊下面的分頁器每個數(shù)字可以對應上面每個不同的主題內(nèi)容頁面；
-
每頁頁碼不超過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"> <!--新聞區(qū)域--> <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);
封裝一個方法創(chuàng)建頁碼導航欄；并定義他們頁碼開始和結(jié)束的地方
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);
}
}
封裝一個方法將后臺傳送來的數(shù)據(jù)輸出到新聞內(nèi)容欄中
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>
前臺的部分完成，開始后臺的 數(shù)據(jù)處理 ，創(chuàng)立200個新聞內(nèi)容欄，并輸出到前臺
<?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);
?>
這就是一個簡單的分頁器，希望大家喜歡
