Pagination
Prisma PHP provides a simple and user-friendly way to paginate your data. With Prisma PHP, you can easily paginate your data and display it in a paginated format. Pagination is a powerful feature that allows you to break down large datasets into smaller, more manageable chunks. It helps improve the performance of your application by reducing the amount of data that needs to be loaded at once. Prisma PHP makes it easy to implement pagination in your PHP applications, allowing you to create paginated views of your data with just a few lines of code.
Example Usage V1
| Version Log |
|---|
| 1.22.0 |
| 1.20.4 |
| 1.20.0 |
| 1.19.4 |
| 1.19.2 |
Page 1 of 10
<?php
use Lib\Prisma\Classes\Prisma;
use Lib\StateManager;
$prisma = Prisma::getInstance();
$perPage = 10;
$currentPage = StateManager::getState('currentPage', 1);
$totalUsers = $prisma->user->count();
$totalPages = ceil($totalUsers / $perPage);
$users = $prisma->user->findMany([
'select' => [
'id' => true,
'name' => true,
'email' => true,
'userRole' => [
'select' => [
'name' => true,
]
]
],
'orderBy' => [
'name' => 'asc',
],
'take' => $perPage,
'skip' => ($currentPage - 1) * $perPage,
], true);
function paginate($data)
{
global $totalPages;
if ($data->page > $totalPages || $data->page < 1) return;
StateManager::setState('currentPage', $data->page);
}
?>
<div class="w-full max-w-4xl mx-auto">
<table class="min-w-full border-collapse">
<thead>
<tr>
<th class="px-4 py-2 border-b text-left">Name</th>
<th class="px-4 py-2 border-b text-left">Email</th>
<th class="px-4 py-2 border-b text-left">Role</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user) : ?>
<tr>
<td class="px-4 py-2 border-b"><?= $user->name ?></td>
<td class="px-4 py-2 border-b"><?= $user->email ?></td>
<td class="px-4 py-2 border-b"><?= $user->userRole->name ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="flex items-center justify-between space-x-2 py-4">
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
Page <?= $currentPage ?> of <?= $totalPages ?>
</div>
<div class="flex items-center space-x-2">
<button
class="hidden h-8 w-8 p-0 lg:flex items-center justify-center border rounded"
onclick="paginate({'page': 1})"
<?= $currentPage === 1 ? 'disabled' : '' ?>>
<span class="sr-only">Go to first page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
</svg>
</button>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $currentPage - 1 ?>})"
<?= $currentPage === 1 ? 'disabled' : '' ?>>
<span class="sr-only">Go to previous page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $currentPage + 1 ?>})"
<?= $currentPage === $totalPages ? 'disabled' : '' ?>>
<span class="sr-only">Go to next page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
<button
class="hidden h-8 w-8 p-0 lg:flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $totalPages ?>})"
<?= $currentPage === $totalPages ? 'disabled' : '' ?>>
<span class="sr-only">Go to last page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>Example Usage V2
| Version Log |
|---|
| 1.22.0 |
| 1.20.4 |
| 1.20.0 |
| 1.19.4 |
| 1.19.2 |
Page 1 of 10
...
<?php
use Lib\Prisma\Classes\Prisma;
use Lib\StateManager;
$prisma = Prisma::getInstance();
$perPage = 10;
$currentPage = StateManager::getState('currentPage', 1);
$totalUsers = $prisma->user->count();
$totalPages = (int)ceil($totalUsers / $perPage);
$users = $prisma->user->findMany([
'select' => [
'id' => true,
'name' => true,
'email' => true,
'userRole' => [
'select' => [
'name' => true,
]
]
],
'orderBy' => [
'name' => 'asc',
],
'take' => $perPage,
'skip' => ($currentPage - 1) * $perPage,
], true);
function paginate($data)
{
global $state, $totalPages;
if ($data->page > $totalPages || $data->page < 1) return;
StateManager::setState('currentPage', $data->page);
}
?>
<div class="w-full max-w-4xl mx-auto">
<table class="min-w-full border-collapse">
<thead>
<tr>
<th class="px-4 py-2 border-b text-left">Name</th>
<th class="px-4 py-2 border-b text-left">Email</th>
<th class="px-4 py-2 border-b text-left">Role</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user) : ?>
<tr>
<td class="px-4 py-2 border-b"><?= $user->name ?></td>
<td class="px-4 py-2 border-b"><?= $user->email ?></td>
<td class="px-4 py-2 border-b"><?= $user->userRole->name ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="flex items-center justify-between space-x-2 py-4">
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
Page <?= $currentPage ?> of <?= $totalPages ?>
</div>
<div class="flex items-center space-x-2">
<button
class="hidden h-8 w-8 p-0 lg:flex items-center justify-center border rounded"
onclick="paginate({'page': 1})"
<?= $currentPage === 1 ? 'disabled' : '' ?>>
<span class="sr-only">Go to first page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
</svg>
</button>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $currentPage - 1 ?>})"
<?= $currentPage === 1 ? 'disabled' : '' ?>>
<span class="sr-only">Go to previous page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<?php
$maxPagesToShow = 5; // Adjust this number as needed
$startPage = max(1, $currentPage - intval($maxPagesToShow / 2));
$endPage = min($totalPages, $startPage + $maxPagesToShow - 1);
if ($startPage > 1) : ?>
<button class="h-8 w-8 p-0 flex items-center justify-center border rounded" onclick="paginate({'page': 1})">1</button>
<?php if ($startPage > 2) : ?>
<span class="h-8 w-8 flex items-center justify-center">...</span>
<?php endif; ?>
<?php endif; ?>
<?php for ($page = $startPage; $page <= $endPage; $page++) : ?>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded <?= $currentPage === $page ? 'bg-blue-500 text-white' : '' ?>"
onclick="paginate({'page': <?= $page ?>})">
<?= $page ?>
</button>
<?php endfor; ?>
<?php if ($endPage < $totalPages) : ?>
<?php if ($endPage < $totalPages - 1) : ?>
<span class="h-8 w-8 flex items-center justify-center">...</span>
<?php endif; ?>
<button class="h-8 w-8 p-0 flex items-center justify-center border rounded" onclick="paginate({'page': <?= $totalPages ?>})"><?= $totalPages ?></button>
<?php endif; ?>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $currentPage + 1 ?>})"
<?= $currentPage === $totalPages ? 'disabled' : '' ?> data-current-page="<?= $currentPage ?>" data-total-page="<?= $totalPages ?>">
<span class="sr-only">Go to next page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
<button
class="hidden h-8 w-8 p-0 lg:flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $totalPages ?>})"
<?= $currentPage === $totalPages ? 'disabled' : '' ?> data-current-page="<?= $currentPage ?>" data-total-page="<?= $totalPages ?>">
<span class="sr-only">Go to last page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>Example Usage V3
| Version Log |
|---|
| 1.22.0 |
| 1.20.4 |
| 1.20.0 |
| 1.19.4 |
| 1.19.2 |
Page 1 of 10
<?php
use Lib\Prisma\Classes\Prisma;
use Lib\StateManager;
$prisma = Prisma::getInstance();
$perPage = 10;
$currentPage = StateManager::getState('currentPage', 1);
$totalUsers = $prisma->user->count();
$totalPages = (int)ceil($totalUsers / $perPage);
$users = $prisma->user->findMany([
'select' => [
'id' => true,
'name' => true,
'email' => true,
'userRole' => [
'select' => [
'name' => true,
]
]
],
'orderBy' => [
'name' => 'asc',
],
'take' => $perPage,
'skip' => ($currentPage - 1) * $perPage,
], true);
function paginate($data)
{
global $state, $totalPages;
if ($data->page > $totalPages || $data->page < 1) return;
StateManager::setState('currentPage', $data->page);
}
?>
<div class="w-full max-w-4xl mx-auto">
<table class="min-w-full border-collapse">
<thead>
<tr>
<th class="px-4 py-2 border-b text-left">Version Log</th>
<th class="px-4 py-2 border-b text-left">Email</th>
<th class="px-4 py-2 border-b text-left">Role</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user) : ?>
<tr>
<td class="px-4 py-2 border-b"><?= $user->name ?></td>
<td class="px-4 py-2 border-b"><?= $user->email ?></td>
<td class="px-4 py-2 border-b"><?= $user->userRole->name ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="flex items-center justify-between space-x-2 py-4">
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
Page <?= $currentPage ?> of <?= $totalPages ?>
</div>
<div class="flex items-center space-x-2">
<button
class="hidden h-8 w-8 p-0 lg:flex items-center justify-center border rounded"
onclick="paginate({'page': 1})"
<?= $currentPage === 1 ? 'disabled' : '' ?>>
<span class="sr-only">Go to first page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
</svg>
</button>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $currentPage - 1 ?>})"
<?= $currentPage === 1 ? 'disabled' : '' ?>>
<span class="sr-only">Go to previous page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<?php
$pageLimit = 5; // Number of page buttons to show
$startPage = max(1, $currentPage - floor($pageLimit / 2));
$endPage = min($totalPages, $startPage + $pageLimit - 1);
// Adjust startPage if we're close to the end
if ($endPage - $startPage < $pageLimit - 1) {
$startPage = max(1, $endPage - $pageLimit + 1);
}
for ($page = $startPage; $page <= $endPage; $page++) : ?>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded <?= $currentPage === (int)$page ? 'bg-blue-500 text-white' : '' ?>"
onclick="paginate({'page': <?= $page ?>})">
<?= $page ?>
</button>
<?php endfor; ?>
<button
class="h-8 w-8 p-0 flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $currentPage + 1 ?>})"
<?= $currentPage === $totalPages ? 'disabled' : '' ?>>
<span class="sr-only">Go to next page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
<button
class="hidden h-8 w-8 p-0 lg:flex items-center justify-center border rounded"
onclick="paginate({'page': <?= $totalPages ?>})"
<?= $currentPage === $totalPages ? 'disabled' : '' ?>>
<span class="sr-only">Go to last page</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>