一个仿tp5分页组件的实现

样式：

a{
    text-decoration: none;
    color: inherit;
}
.out-cp{
    width:100%;
    text-align: center;
}
.c-page{
    display:inline-block;
    height:42px;
    margin:50px 0 ;
}
.c-page > div{
    float: left;
    height:42px;
}
.c-page > div:not(:first-child){
    margin-left: 10px;
}
.c-page > div > a{
    height:40px;
    display: block;
    border-top: solid 1px #e5e5e5;
    border-right:solid 1px #e5e5e5;
    border-bottom:solid 1px #e5e5e5;
    float: left;
    font-size: 14px;
    letter-spacing: 1px;
    color: #333333;
    text-align: center;
    line-height: 40px;
}
.c-page > div > a:hover,.c-page > div > a.on{
    color: #ffffff;
    background-color: #699dff;
    border-color:#699dff; ;
}
.c-page > div > a:nth-child(1){
    border-left: solid 1px #e5e5e5;
}
.c-page > .c-page-lefts > a:nth-child(1),.c-page > .c-page-rights > a:nth-child(2){
    width: 50px;
}

.c-page > .c-page-lefts > a:nth-child(2),.c-page > .c-page-rights > a:nth-child(1){
    width: 80px;
}
.c-page > .c-page-middles > a{
    width: 40px;
}

.c-page > div > a:nth-child(1){
    border-radius: 4px 0px 0px 4px;
}
.c-page > div > a:last-child{
    border-radius: 0px 4px 4px 0px;
}


.c-page > .c-page-lefts > a:nth-child(2):before,.c-page > .c-page-rights > a:nth-child(1):after{
    content: '';
    display: inline-block;
    width:7px;
    height:12px;
    position: relative;
    top:1px;
}
.c-page > .c-page-lefts > a:nth-child(2):before{
    background: url("http://www.yangqu.com/images/ccpageb.png")center center no-repeat;
    margin-right: 5px;
}
.c-page > .c-page-rights > a:nth-child(1):after{
    background: url("http://www.yangqu.com/images/ccpageb.png")center center no-repeat;
    margin-left: 5px;
    transform:rotate(180deg);
}
.c-page > .c-page-lefts > a:nth-child(2):hover:before{
    background: url("http://www.yangqu.com/images/ccpagea.png")center center no-repeat;
}
.c-page > .c-page-rights > a:nth-child(1):hover:after{
    background: url("http://www.yangqu.com/images/ccpagea.png")center center no-repeat;
    transform:rotate(180deg);
}

.c-page > .c-page-lefts > a:nth-child(2).dis:before{
    background: url("http://www.yangqu.com/images/ccpagec.png")center center no-repeat;
}

.c-page > .c-page-rights > a:nth-child(1).dis:after{
    background: url("http://www.yangqu.com/images/ccpagec.png")center center no-repeat;

    transform:rotate(180deg);
}

.c-page > div > a.dis{
    background-color: #FBFBFB;
    color: #C9C9C9;
    cursor: not-allowed;
    border-color: #e5e5e5;
}

 

 

逻辑：

 

/*

 * 接收sql语句，获取列表以及分页

 */



function cPage($sql,$pageSize = 10){
    global $db;

    //分页要素：pageNow 、 pageSize



    /*

     * 编辑sql语句查询count

     */

    $csql  =preg_replace("/SELECT.*FROM/i" , 'SELECT COUNT(*) FROM',$sql);

    $res = $db->fetch_array($db->query($csql));

    $item_count = $res['COUNT(*)'];

    $pageCount = intval($item_count / $pageSize) + ($item_count % $pageSize > 0 ? 1 : 0);





    /*

     * 接受并且检测pageNow

     * 1：若 pageNow 不为正整数，则 pageNow = 1

     *  2: 若 pageNow 大于 $pageCount ，则 $pageNow = $pageCount;

     */

    $pageNow = (preg_match("/^[1-9][0-9]*$/",$_GET['pageNow'])) ? $_GET['pageNow'] : 1;
    var_dump($pageNow);
    $pageNow = $pageNow > $pageCount ? $pageCount : $pageNow;

    $offset = ($pageNow - 1) * $pageSize;

    $data = [];

    $sql .= " LIMIT $offset,$pageSize";

    $result = $db->query($sql);

    while($r = $db->fetch_array($result)){

        $data[] = $r;

    }


    //生成[get] param

    $paramData = $_GET;

    $paramStr = '?';

    $flag_1 = 0;

    foreach ($paramData as $k => $v){

        // ..

        if($k == 'pageNow'){

            continue;

        }

        if($flag_1 > 0){

            $paramStr .= '&';

        }

        $paramStr .= "$k=$v";

        $flag_1 ++;

    }

    if(!$flag_1){

        $paramStr .= "pageNow=";

    }else{

        $paramStr .= "&pageNow=";

    }





    // html

    $html = '<div class="out-cp">

                <div class="c-page">';

    $html .= '        <div class="c-page-lefts">

                            <a href="'.($paramStr . 1).'">首页</a>';

    /*

     * 上一页。两种情况：

     * true  ： 当前不为第一页 且 pageCount > 1

     * false  :  the else

     */

    if($pageNow > 1  && $pageCount > 1 ){

        $html .= ' <a href="'.$paramStr . ($pageNow - 1).'">上一页</a>';

    }else{

        $html .= ' <a class="dis">上一页</a>';

    }

    $html .= "</div>";

    /*

     * mid

     * 最多显示7个页码，且当前页优先位于最中间

     */

    $midPage = [];



    if($pageCount  > 7){

        // left..

        if(($pageNow - 3 ) < 1){

            $midPage = range(1,7);

        }

        // ..

        else if( ($pageCount - $pageNow) < 3){

            $midPage = range($pageCount - 6,$pageCount);

        }

        else{

            $midPage = range($pageNow - 3,$pageNow + 3);

        }

    }else{

        if($pageCount > 0){

            $midPage = range(1,$pageCount);

        }else{

            $midPage = [];

        }



    }



    $html .= '<div class="c-page-middles">';



    foreach ($midPage as $k_1 => $v_2){

        // selected

        if($v_2 == $pageNow){

            $html .= '<a class="on" href="'.$paramStr . $v_2 .'">'.$v_2.'</a>';

        }else{

            $html .= '<a href="'.$paramStr . $v_2 .'">'.$v_2.'</a>';

        }

    }

    $html .= "</div>";



    /*

     * 下一页；两种情况：

     * true : pageCount > pageNow

     * false : ..else..

     */

    $html .= '<div class="c-page-rights">';

    if($pageCount > $pageNow){

        $html .= '<a href="'.$paramStr . ($pageNow + 1).'">下一页</a>';

    }else{

        $html .= '<a  class="dis">下一页</a>';

    }

    $html .= '        <a href="'.$paramStr . $pageCount.'">尾页</a>

                        </div>

                            </div>

                                </div>';

    return ['data' => $data , 'pageCode' => $html];

}

 

/*
 * 接收sql语句，获取列表以及分页
 */


function cPage($sql,$pageSize = 10){    global $db;
    //分页要素：pageNow 、 pageSize


    /*
     * 编辑sql语句查询count
     */
    $csql  =preg_replace("/SELECT.*FROM/i" , 'SELECT COUNT(*) FROM',$sql);
    $res = $db->fetch_array($db->query($csql));
    $item_count = $res['COUNT(*)'];
    $pageCount = intval($item_count / $pageSize) + ($item_count % $pageSize > 0 ? 1 : 0);




    /*
     * 接受并且检测pageNow
     * 1：若 pageNow 不为正整数，则 pageNow = 1
     *  2: 若 pageNow 大于 $pageCount ，则 $pageNow = $pageCount;
     */
    $pageNow = (preg_match("/^[1-9][0-9]*$/",$_GET['pageNow'])) ? $_GET['pageNow'] : 1;    var_dump($pageNow);    $pageNow = $pageNow > $pageCount ? $pageCount : $pageNow;
    $offset = ($pageNow - 1) * $pageSize;
    $data = [];
    $sql .= " LIMIT $offset,$pageSize";
    $result = $db->query($sql);
    while($r = $db->fetch_array($result)){
        $data[] = $r;
    }

    //生成[get] param
    $paramData = $_GET;
    $paramStr = '?';
    $flag_1 = 0;
    foreach ($paramData as $k => $v){
        // ..
        if($k == 'pageNow'){
            continue;
        }
        if($flag_1 > 0){
            $paramStr .= '&';
        }
        $paramStr .= "$k=$v";
        $flag_1 ++;
    }
    if(!$flag_1){
        $paramStr .= "pageNow=";
    }else{
        $paramStr .= "&pageNow=";
    }




    // html
    $html = '<div class="out-cp">
                <div class="c-page">';
    $html .= '        <div class="c-page-lefts">
                            <a href="'.($paramStr . 1).'">首页</a>';
    /*
     * 上一页。两种情况：
     * true  ： 当前不为第一页 且 pageCount > 1
     * false  :  the else
     */
    if($pageNow > 1  && $pageCount > 1 ){
        $html .= ' <a href="'.$paramStr . ($pageNow - 1).'">上一页</a>';
    }else{
        $html .= ' <a class="dis">上一页</a>';
    }
    $html .= "</div>";
    /*
     * mid
     * 最多显示7个页码，且当前页优先位于最中间
     */
    $midPage = [];


    if($pageCount  > 7){
        // left..
        if(($pageNow - 3 ) < 1){
            $midPage = range(1,7);
        }
        // ..
        else if( ($pageCount - $pageNow) < 3){
            $midPage = range($pageCount - 6,$pageCount);
        }
        else{
            $midPage = range($pageNow - 3,$pageNow + 3);
        }
    }else{
        if($pageCount > 0){
            $midPage = range(1,$pageCount);
        }else{
            $midPage = [];
        }


    }


    $html .= '<div class="c-page-middles">';


    foreach ($midPage as $k_1 => $v_2){
        // selected
        if($v_2 == $pageNow){
            $html .= '<a class="on" href="'.$paramStr . $v_2 .'">'.$v_2.'</a>';
        }else{
            $html .= '<a href="'.$paramStr . $v_2 .'">'.$v_2.'</a>';
        }
    }
    $html .= "</div>";


    /*
     * 下一页；两种情况：
     * true : pageCount > pageNow
     * false : ..else..
     */
    $html .= '<div class="c-page-rights">';
    if($pageCount > $pageNow){
        $html .= '<a href="'.$paramStr . ($pageNow + 1).'">下一页</a>';
    }else{
        $html .= '<a  class="dis">下一页</a>';
    }
    $html .= '        <a href="'.$paramStr . $pageCount.'">尾页</a>
                        </div>
                            </div>
                                </div>';
    return ['data' => $data , 'pageCode' => $html];
}