文章分页逻辑原生源码，PHP后端+html

文章分页逻辑原生最终效果如下：

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.最终效果