Add pagination

This commit is contained in:
anomny
2025-11-03 20:23:05 +01:00
parent c3973b6cfb
commit edac9f28d8
4 changed files with 112 additions and 6 deletions

View File

@@ -41,7 +41,16 @@
{
<tr class="user-row">
<td>
<img class="rounded-circle user-icon" src="~/Home/UserPhoto?uid=@userTableViewModel.Uid&size=48" alt="Photo" style="width:32px;height:32px;" width="32" height="32" loading="lazy" />
@if (!string.IsNullOrEmpty(userTableViewModel.JpegPhotoBase64))
{
<img class="rounded-circle user-icon" src="data:image/webp;base64,@userTableViewModel.JpegPhotoBase64" alt="Photo" style="width:32px;height:32px;" width="32" height="32" />
}
else
{
<div class="rounded-circle user-icon bg-secondary d-flex align-items-center justify-content-center" style="width:32px;height:32px;">
<span class="text-white fw-bold">@userTableViewModel.Name.FirstOrDefault()@userTableViewModel.Surname.FirstOrDefault()</span>
</div>
}
</td>
<td>@userTableViewModel.Uid</td>
<td>@userTableViewModel.Title</td>
@@ -79,6 +88,64 @@
</tbody>
</table>
</div>
@* Pagination Controls *@
@if (Model.TotalPages > 1)
{
<nav aria-label="User pagination" class="mt-4">
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted">
@T["Showing"] @((Model.CurrentPage - 1) * Model.PageSize + 1) - @Math.Min(Model.CurrentPage * Model.PageSize, Model.TotalUsers) @T["of"] @Model.TotalUsers @T["users"]
</div>
<ul class="pagination mb-0">
@* Previous Button *@
<li class="page-item @(Model.CurrentPage == 1 ? "disabled" : "")">
<a class="page-link" href="?page=@(Model.CurrentPage - 1)&pageSize=@Model.PageSize" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
@* Page Numbers *@
@{
int startPage = Math.Max(1, Model.CurrentPage - 2);
int endPage = Math.Min(Model.TotalPages, Model.CurrentPage + 2);
if (startPage > 1)
{
<li class="page-item"><a class="page-link" href="?page=1&pageSize=@Model.PageSize">1</a></li>
if (startPage > 2)
{
<li class="page-item disabled"><span class="page-link">...</span></li>
}
}
for (int i = startPage; i <= endPage; i++)
{
<li class="page-item @(i == Model.CurrentPage ? "active" : "")">
<a class="page-link" href="?page=@i&pageSize=@Model.PageSize">@i</a>
</li>
}
if (endPage < Model.TotalPages)
{
if (endPage < Model.TotalPages - 1)
{
<li class="page-item disabled"><span class="page-link">...</span></li>
}
<li class="page-item"><a class="page-link" href="?page=@Model.TotalPages&pageSize=@Model.PageSize">@Model.TotalPages</a></li>
}
}
@* Next Button *@
<li class="page-item @(Model.CurrentPage >= Model.TotalPages ? "disabled" : "")">
<a class="page-link" href="?page=@(Model.CurrentPage + 1)&pageSize=@Model.PageSize" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</div>
</nav>
}
</div>
<!-- User Delete Confirmation Modal -->