🐛 Fix pagination overflow in hosted page

This commit is contained in:
2025-11-22 17:20:36 +08:00
parent 3ce2b36c15
commit e449e16d33

View File

@@ -73,7 +73,43 @@
{ {
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<div class="join"> <div class="join">
@for (var idx = 1; idx <= Model.TotalPages; idx++) @{
var maxPagesToShow = 5; // e.g., 2 before, current, 2 after
var startPage = Math.Max(1, Model.CurrentPage - (maxPagesToShow / 2));
var endPage = Math.Min(Model.TotalPages, Model.CurrentPage + (maxPagesToShow / 2));
// Adjust startPage and endPage to ensure exactly maxPagesToShow are shown if possible
if (endPage - startPage + 1 < maxPagesToShow)
{
if (startPage == 1)
{
endPage = Math.Min(Model.TotalPages, startPage + maxPagesToShow - 1);
}
else if (endPage == Model.TotalPages)
{
startPage = Math.Max(1, endPage - maxPagesToShow + 1);
}
}
}
<a asp-page="/Posts"
asp-route-currentPage="@(Model.CurrentPage > 1 ? Model.CurrentPage - 1 : 1)"
class="join-item btn @(Model.CurrentPage == 1 ? "btn-disabled" : "")">«</a>
@if (startPage > 1)
{
<a asp-page="/Posts"
asp-route-currentPage="1"
class="join-item btn @(1 == Model.CurrentPage ? "btn-active" : "")">
1
</a>
@if (startPage > 2)
{
<span class="join-item btn btn-disabled">...</span>
}
}
@for (var idx = startPage; idx <= endPage; idx++)
{ {
var pageIdx = idx; var pageIdx = idx;
<a asp-page="/Posts" <a asp-page="/Posts"
@@ -82,6 +118,23 @@
@pageIdx @pageIdx
</a> </a>
} }
@if (endPage < Model.TotalPages)
{
@if (endPage < Model.TotalPages - 1)
{
<span class="join-item btn btn-disabled">...</span>
}
<a asp-page="/Posts"
asp-route-currentPage="@Model.TotalPages"
class="join-item btn @(Model.TotalPages == Model.CurrentPage ? "btn-active" : "")">
@Model.TotalPages
</a>
}
<a asp-page="/Posts"
asp-route-currentPage="@(Model.CurrentPage < Model.TotalPages ? Model.CurrentPage + 1 : Model.TotalPages)"
class="join-item btn @(Model.CurrentPage == Model.TotalPages ? "btn-disabled" : "")">»</a>
</div> </div>
</div> </div>
} }