文章分页逻辑原生最终效果如下:
1.css样式
/*.hmFs_trsBg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/banLine.png) repeat-x left top; background-size:auto 100%; }
.hmFs_trsBg:after{content:"";position:absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/hmfs_2.png) repeat-x left bottom; }*/
@media (max-width:767px){
*{letter-spacing:0;}
}
.page{ text-align: center; }
.pagination{}
.pagination li{ display:inline-block;}
/* .pagination li a{ display: inline-block; margin:0 2px; min-width: 38px; border-radius: 50%; text-align: center; font: 16px/38px Arial; font-weight: bold; padding:0 10px; } */
.pagination li a{ display: inline-block; margin:0 2px; min-width: 38px; text-align: center; font: 16px/38px Arial; font-weight: bold; padding:0 10px; }
/* .pagination li.active a,.pagination li a:hover{ background:#000; color:#fff;} */
.pagination li.active a,.pagination li a:hover{
color: #8B8B8B;
border-bottom: 4px solid #ED6D00;
}
.pagination li:first-child{margin-right:20px;}
.pagination li:last-child{margin-left:20px;}
.pagination li:first-child a,.pagination li:last-child a{padding:0 15px;}
/* .pagination li:first-child a,.pagination li:last-child a{border-radius:0.6em; padding:0 15px;} */
/*.m3nContent video,.m3nContent img{display:block; margin-left:auto; margin-right:auto;}*/
.pagination {
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
margin-left: auto;
margin-bottom: 50px;
margin-top: 90px;
display: block;
}
.pagination li:first-child a, .pagination li:last-child a {
color: #8B8B8B;
}
.pagination li a {
color: #8B8B8B;
}
@media (max-width:767px){
*{background-attachment:scroll!important;}
}
2.原来实例样子
<ul class="pagination">
<li class="disabled" aria-disabled="true" aria-label="« Previous"><a aria-hidden="true">‹</a></li>
<li class="active" aria-current="news.php?type=1&page=1"><a>1</a></li>
<li><a href="news.php?type=1&page=2">2</a></li>
<li><a href="news.php?type=1&page=3">3</a></li>
<li><a href="news.php?type=1&page=4">4</a></li>
<li><a href="news.php?type=1&page=5">5</a></li>
<li class="disabled" aria-disabled="true"><a>...</a></li>
<li><a href="news.php?type=1&page=14">8</a></li>
<li><a href="" rel="next" aria-label="Next »">›</a></li>
</ul>
3.添加后端后的PHP后端传值代码
<?php
include '../public/db.php';
$newRdData = selectHotArticle('10',1);
$type = $_GET['type']; //文章分类
$nowpage = $_GET['page'];
$showNum = 12;//每页显示数量
$termId = 10; //显示新闻的分类id
$pageData = getPageList($nowpage,$showNum,$termId); //$page,$pageSize,$termid
$newData = $pageData['data'];
$pagesCount = $pageData['pages_count'];
?>
4.前后端混写代码
<div class="page wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
<?php
if($pagesCount>1){ ?>
<ul class="pagination">
<!-- prev上一页 -->
<?php
if($nowpage > 1){
echo '<li class="disabled" aria-disabled="true" aria-label="« Previous"><a href="news.php?type='. $type .'&page='.($nowpage-1).'" aria-hidden="true">‹</a></li>';
}else {
echo '<li><a href="" >‹</a></li>';
}
?>
<!-- pages 页码 -->
<?php if($pagesCount < 8 && $pagesCount >1 ){ ?>
<?php
for($i=1;$i<($pagesCount+1);$i++){
if($nowpage == $i){
echo '<li class="active" aria-current="news.php?type='. $type .'&page='. $i .' "><a>'. $i .'</a></li>';
}else{
echo '<li><a href="news.php?type='. $type .'&page='. $i .' ">'. $i .'</a></li>';
}
}
?>
<?php }else if($pagesCount >= 8){ ?>
<?php
if( ($pagesCount-$nowpage) <=2 ){
echo '<li><a href="news.php?type='. $type .'&page=1">1</a></li>';
echo '<li class="disabled" aria-disabled="true"><a>...</a></li>';
for($i=($pagesCount-4);$i<($pagesCount+1);$i++){
if($nowpage == $i){
echo '<li class="active" aria-current="news.php?type='. $type .'&page='. $i .' "><a>'. $i .'</a></li>';
}else{
echo '<li><a href="news.php?type='. $type .'&page='. $i .' ">'. $i .'</a></li>';
}
}
}else{
if($nowpage >2){
for($i=($nowpage-2);$i<($nowpage+3);$i++){
if($nowpage == $i){
echo '<li class="active" aria-current="news.php?type='. $type .'&page='. $i .' "><a>'. $i .'</a></li>';
}else{
echo '<li><a href="news.php?type='. $type .'&page='. $i .' ">'. $i .'</a></li>';
}
}
}else{
for($i=1;$i<6;$i++){
if($nowpage == $i){
echo '<li class="active" aria-current="news.php?type='. $type .'&page='. $i .' "><a>'. $i .'</a></li>';
}else{
echo '<li><a href="news.php?type='. $type .'&page='. $i .' ">'. $i .'</a></li>';
}
}
}
echo '<li class="disabled" aria-disabled="true"><a>...</a></li>';
echo '<li><a href="news.php?type='. $type .'&page='. $pagesCount .'">'. $pagesCount .'</a></li>';
}
?>
<?php } ?>
<!-- next下一页 -->
<?php
if(($pagesCount-$nowpage)> 0){
echo '<li><a href="news.php?type='. $type .'&page='. ($nowpage + 1) .' ">›</a></li>';
}else {
echo '<li><a href="" >›</a></li>';
}
?>
</ul>
<?php } ?>
</div>
5.最终效果