Updated pager.

JSMR.UI.Blazor/Components/JPagination.razor

@@ -3,6 +3,14 @@
         <label>@IndexInfo</label>
     </div>
     <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" />
+    <div>
+        <MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense">
+            @foreach (int value in PageSizes)
+            {
+                <MudSelectItem Value="@value">@value</MudSelectItem>
+            }
+        </MudSelect>
+    </div>
 </div>
 
 @code {
@@ -12,6 +20,9 @@
     [Parameter]
     public EventCallback<int> PageNumberChanged { get; set; }
 
+    [Parameter]
+    public int[] PageSizes { get; set; } = [5, 10, 25, 50, 100];
+
     [Parameter]
     public int PageSize { get; set; }
 
@@ -34,4 +45,10 @@
         PageNumber = newPage;
         await PageNumberChanged.InvokeAsync(newPage);
     }
+
+    private async Task OnPageSizeChanged(int newPageSize)
+    {
+        PageSize = newPageSize;
+        await PageSizeChanged.InvokeAsync(newPageSize);
+    }
 }

JSMR.UI.Blazor/Pages/Circles.razor

@@ -118,8 +118,7 @@ else
         }
     </div> *@
 
-    <JPagination @bind-PageNumber="PageNumber" @bind-PageSize="pageSize" @bind-TotalItems="searchResults.TotalItems" />
+    <JPagination @bind-PageNumber="PageNumber" @bind-PageSize="PageSize" @bind-TotalItems="searchResults.TotalItems" />
-    @* <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)searchResults.TotalItems / (decimal)100))" @bind-Selected="@PageNumber" Class="j-pager" /> *@
 }
 
 <style>
@@ -177,6 +176,17 @@ else
     }
 
     int pageSize = 100;
+    
+    public int PageSize
+    {
+        get { return pageSize; }
+        set
+        {
+            pageSize = value;
+            _ = UpdateDataAsync(true);
+        }
+    }
+
     SearchResult<CircleSearchItem>? searchResults;
 
     protected override Task OnInitializedAsync()

JSMR.UI.Blazor/Pages/Creators.razor

@@ -4,6 +4,7 @@
 @using JSMR.Application.Common.Search
 @using JSMR.Application.Creators.Queries.Search
 @using JSMR.Application.Creators.Queries.Search.Contracts
+@using JSMR.UI.Blazor.Components
 @using JSMR.UI.Blazor.Services
 
 <PageTitle>Creators</PageTitle>
@@ -39,7 +40,7 @@ else
         </Columns>
     </MudDataGrid>
 
-    <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)searchResults.TotalItems / (decimal)100))" @bind-Selected="@PageNumber" Class="j-pager" />
+    <JPagination @bind-PageNumber="PageNumber" @bind-PageSize="PageSize" @bind-TotalItems="searchResults.TotalItems" />
 }
 
 <style>
@@ -68,7 +69,7 @@ else
         set
         {
             keywords = value;
-            _ = LoadTagsAsync();
+            _ = UpdateDataAsync(true);
         }
     }
 
@@ -80,21 +81,40 @@ else
         set
         {
             pageNumber = value;
-            _ = LoadTagsAsync();
+            _ = UpdateDataAsync(false);
         }
     }
 
     int pageSize = 100;
+
+    public int PageSize
+    {
+        get { return pageSize; }
+        set
+        {
+            pageSize = value;
+            _ = UpdateDataAsync(true);
+        }
+    }
+
     SearchResult<CreatorSearchItem>? searchResults;
 
     protected override Task OnInitializedAsync()
     {
-        _ = LoadTagsAsync();
+        _ = LoadCreatorsAsync();
 
         return Task.CompletedTask;
     }
 
-    private async Task LoadTagsAsync()
+    private async Task UpdateDataAsync(bool resetPageNumber)
+    {
+        if (resetPageNumber)
+            pageNumber = 1;
+
+        await LoadCreatorsAsync();
+    }
+
+    private async Task LoadCreatorsAsync()
     {
         SearchCreatorsRequest request = new(
             Options: new()

JSMR.UI.Blazor/Pages/Tags.razor

@@ -4,6 +4,7 @@
 @using JSMR.Application.Common.Search
 @using JSMR.Application.Tags.Queries.Search
 @using JSMR.Application.Tags.Queries.Search.Contracts
+@using JSMR.UI.Blazor.Components
 @using JSMR.UI.Blazor.Services
 
 <PageTitle>Tags</PageTitle>
@@ -40,7 +41,7 @@ else
         </Columns>
     </MudDataGrid>
 
-    <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)searchResults.TotalItems / (decimal)100))" @bind-Selected="@PageNumber" Class="j-pager" />
+    <JPagination @bind-PageNumber="PageNumber" @bind-PageSize="PageSize" @bind-TotalItems="searchResults.TotalItems" />
 }
 
 <style>
@@ -69,7 +70,7 @@ else
         set
         {
             keywords = value;
-            _ = LoadTagsAsync();
+            _ = UpdateDataAsync(true);
         }
     }
 
@@ -81,11 +82,22 @@ else
         set
         {
             pageNumber = value;
-            _ = LoadTagsAsync();
+            _ = UpdateDataAsync(false);
         }
     }
 
     int pageSize = 100;
+    
+    public int PageSize
+    {
+        get { return pageSize; }
+        set
+        {
+            pageSize = value;
+            _ = UpdateDataAsync(true);
+        }
+    }
+
     SearchResult<TagSearchItem>? searchResults;
 
     protected override Task OnInitializedAsync()
@@ -95,6 +107,14 @@ else
         return Task.CompletedTask;
     }
 
+    private async Task UpdateDataAsync(bool resetPageNumber)
+    {
+        if (resetPageNumber)
+            pageNumber = 1;
+
+        await LoadTagsAsync();
+    }
+
     private async Task LoadTagsAsync()
     {
         SearchTagsRequest request = new(