Simple Website Engine

Action Handler (actions/users.php)

Use the get() method to pass the totalRecords and the slice of the data to display

<?php
class Users {
    public function get() {
        //Get pagination parameters
        $currentPage = getQuery('page', 1);
        $perPage = 10;
        
        // Assume this returns an array of 10 users
        $users = getUsersFromDatabase($currentPage, $perPage);

        // Assume this returns the total number of users e.g. 200
        $totalUsers = getTotalUserCount();
        return [
            'users' => $users,
            'totalRecords' => $totalUsers
        ];
    }
}

Template (views/users.html)

Loop the records and below put the <!--pagination--> shortcode

<h1>Users</h1>
<!--foreach($users as $user)-->
    <div class="user">
        <h3><!--$user[name]--></h3>
        <p>Email: <!--$user[email]--></p>
    </div>
<!--endforeach-->
<!--pagination-->

If you want to change the number of records per page, you can pass the variable in the shortcode as:

<!--pagination 20-->

This would show 20 records per page instead of the default 10.

CSS Styling

.pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.pagination span.current {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
}

.pagination span.disabled {
    background-color: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    border-color: #ddd;
}

.pagination.single-page {
    display: none;
}