PHP vanilla Pagination

How to create a PHP vanilla Pagination

Watch the full tutorial here:
Youtube Rumble Odysee

html

<?php include "./backend.php" ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>country</th>
                <th>create at</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <?php foreach ($queryResults as $data): ?>
                <tr>
                    <td><?= $data->id ?></td>
                    <td><?= $data->name ?></td>
                    <td><?= $data->country ?></td>
                    <td><?= $data->create_at ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <div class="paginationContainer">
        <span>page: <?= $currentPage ?> of: <?= $pages ?></span>
        <div class="paginationList">
            <a href="?page=1">Firts</a>

            <?php if ($currentPage > 1): ?>
                <a href="?page=<?= $currentPage - 1 ?>"><i class="bi bi-arrow-left-short"></i></a>
            <?php else: ?>
                <span><i class="bi bi-arrow-left-short"></i></span>
            <?php endif; ?>

            <div class="page-links-number">
                <?php for ($counter = 1; $counter <= $pages; $counter++): ?>
                    <a href="?page=<?= $counter ?>"><?= $counter ?></a>
                <?php endfor; ?>
            </div>

            <?php if (!isset($_GET['page'])): ?>
                <a href="?page=2"><i class="bi bi-arrow-right-short"></i></a>
            <?php else: ?>
                <?php if ($currentPage >= $pages): ?>
                    <a><i class="bi bi-arrow-right-short"></i></a>
                <?php else: ?>
                    <a href="?page=<?= $currentPage + 1 ?>"><i class="bi bi-arrow-right-short"></i></a>
                <?php endif; ?>
            <?php endif; ?>

            <a href="?page=<?= $pages ?>">Last</a>
        </div>
    </div>

</body>

</html>

css

.paginationContainer {
        display: flex;
        align-items: center;
        gap: 50px;
        padding: 10px 0;

        & .paginationList {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }

php

<?php
try {
    $pdo = new PDO("mysql:host=localhost;dbname=pagination_db", "root", "");
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Connection faild: ' . $e->getMessage();
}

$offset = 2;
$page = isset($_GET['page']) ? max(1, (int) $_GET['page']) : 1;
$offsetStart = ($page - 1) * $offset;

$queryResult = queryData($pdo, $offsetStart, $offset);
$pages = getTotalPage($pdo, $offset);
$currentPage = $page;

function queryData($pdo, $offsetStart, $offset)
{
    $query = "SELECT * FROM person ORDER BY id desc LIMIT :offset, :limit";
    $stmt = $pdo->prepare($query);
    $stmt->bindValue(":offset", (int) $offsetStart, PDO::PARAM_INT);
    $stmt->bindValue(":limit", (int) $offset, PDO::PARAM_INT);
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_OBJ);
}

function getTotalPage($pdo, $offset)
{
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM person");
    $stmt->execute();
    $getRowCount = $stmt->fetchColumn();
    return ceil($getRowCount / $offset);
}