PHP ページング機能 サンプル

サイトを作成する際に、必ずと言っていいほど必要となるのがページング機能。
ページネイションやページャーやら、呼び方は様々ですが。
試行錯誤の結果、今はこんな感じのを使いまわしています。

条件分岐を分かりやすくするのって、難しいですよね。
久しぶりに触ると、条件分岐を理解するのに時間がかかります。

function paging($total, $page=1, $limit = 100, $url = "")
{
    //クラス名
    $CLASS_PAGING='paging';
    $CLASS_NEXT='pagingNext';
    $CLASS_PREV='pagingPrev';
    $CLASS_BUTTON='pagingButton';
    $CLASS_BUTTON_SELECT='pagingSelect';
    $CLASS_BUTTON_DOTS='paginDots';
    
    //PREVの要素
    $CLASS_PREV_ITEM='PREV';
    //NEXTの要素
    $CLASS_NEXT_ITEM='NEXT';

    //表示するボタンの数、3以上
    $BUTTON_CNT=8;

    $totalPage = (int) ceil($total / $limit);
    if ($totalPage == 1) {
        return;
    }
    if ($page>$totalPage) {
        $page=1;
    }
    
    $queryUrl = (strpos($url, "?")===false) ? "$url?page=" : "$url&page=";
    echo "<div class='$CLASS_PAGING'>";
    if ($page>1) {
        echo "<a class='$CLASS_PREV' href='".(preg_replace("/[?&]page=1$/", "", $queryUrl.($page-1)))."'>$CLASS_PREV_ITEM</a>";
    } else {
        echo "<span class='$CLASS_PREV'></span>";
    }
    echo "<div class=''>";
    for ($i=1,$echo_cnt=0;$i<=$totalPage;$i++) {
        if (
           ($totalPage<=$BUTTON_CNT)|
           ($i==1&&$BUTTON_CNT>7)|
           ($i==2&&$BUTTON_CNT>7)|
           ($i==$totalPage&&$BUTTON_CNT>7)|
           ($i==$totalPage-1&&$BUTTON_CNT>7)|
           ($totalPage>$BUTTON_CNT&&(($echo_cnt<$BUTTON_CNT-2&&$BUTTON_CNT>7)|($echo_cnt<$BUTTON_CNT&&$BUTTON_CNT<=7))&&($i>=$page-1&&$i<=$page+$BUTTON_CNT-2))|
           ($i>$totalPage-($BUTTON_CNT-$echo_cnt))
            ) {
            if (
                ($i==2&&$page>4&&$BUTTON_CNT<$totalPage&&$BUTTON_CNT>7)|
                ($i==$totalPage-1&&$page<$totalPage-($BUTTON_CNT-2)&&$BUTTON_CNT<$totalPage&&$BUTTON_CNT>7)
                ) {
                echo "<span class='$CLASS_BUTTON_DOTS'>…</span>";
            } else {
                echo "<a class='$CLASS_BUTTON ".(($i==$page)?$CLASS_BUTTON_SELECT:"")."' href='".(preg_replace("/[?&]page=1$/", "", $queryUrl.$i))."'>$i</a>";
            }
            $echo_cnt++;
        }
    }
    echo "</div>";
    if ($page<$totalPage) {
        echo "<a class='$CLASS_NEXT' href='". $queryUrl.($page+1)."'>$CLASS_NEXT_ITEM</a>";
    } else {
        echo "<span class='$CLASS_NEXT'></span>";
    }
    echo "</div>";
}

見本①

見本②

CSSサンプル

.paging {
    width: 100%;
    display: flex;
    white-space: nowrap;
    text-align: center;
}

.paging div {
    width: 100%;
    display: flex;
    justify-content: center;
}

.paging a {
    padding: 6px 12px;
    background-color: #333;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.paging a:hover {
    background-color: gray;
}

.paging span {
    padding: 6px 12px;
}

.pagingNext {
    box-sizing: border-box;
    width: 70px;
    min-width: 70px;
}

.pagingPrev {
    box-sizing: border-box;
    width: 70px;
    min-width: 70px;
}

.pagingButton {
    margin: 0 3px;
}

.pagingSelect {
    background-color: gray !important;
}

.paginDots {}