feat: 分页栏增加自定义每页数据数量

src/admin/Bootstrap.Admin/Components/PaginationBase.cs

@@ -1,8 +1,6 @@
-using Bootstrap.Admin.Extensions;
+using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
-using System.Threading.Tasks;
 
 namespace Bootstrap.Admin.Components
 {
@@ -18,7 +16,19 @@ namespace Bootstrap.Admin.Components
         public int PageCount { get; set; } = 0;
 
         /// <summary>
-        /// 
+        /// 获得/设置 每页显示数据数量
+        /// </summary>
+        [Parameter]
+        public int PageItems { get; set; } = 20;
+
+        /// <summary>
+        /// 获得/设置 数据总数
+        /// </summary>
+        [Parameter]
+        public int ItemsCount { get; set; } = 0;
+
+        /// <summary>
+        /// 获得/设置 当前页码
         /// </summary>
         [Parameter]
         public int PageIndex { get; set; } = 1;
@@ -32,14 +42,19 @@ namespace Bootstrap.Admin.Components
         /// <summary>
         /// 
         /// </summary>
-        public Action<int>? ClickPageCallback { get; set; }
+        public Action<int> ClickPageCallback { get; set; } = new Action<int>(i => { });
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public Action PageItemsChangeCallback { get; set; } = new Action(() => { });
 
         /// <summary>
         /// 
         /// </summary>
         protected void MovePrev()
         {
-            if (PageIndex > 1) ClickPageCallback?.Invoke(PageIndex - 1);
+            if (PageIndex > 1) ClickPageCallback(PageIndex - 1);
         }
 
         /// <summary>
@@ -47,7 +62,17 @@ namespace Bootstrap.Admin.Components
         /// </summary>
         protected void MoveNext()
         {
-            if (PageIndex < PageCount) ClickPageCallback?.Invoke(PageIndex + 1);
+            if (PageIndex < PageCount) ClickPageCallback(PageIndex + 1);
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="pageItems"></param>
+        protected void ClickItem(int pageItems)
+        {
+            PageItems = pageItems;
+            PageItemsChangeCallback();
         }
     }
 }

src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor

@@ -60,7 +60,7 @@
                 <td>@context.Define</td>
             </RowTemplate>
         </Table>
-        <Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex"></Pagination>
+        <Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex" ItemsCount="ItemsCount"></Pagination>
     </div>
 </div>
 <div id="tableButtons" class="d-none">
@@ -129,8 +129,6 @@
 
     protected Select? DictCate { get; set; }
 
-    protected int PageItem { get; set; } = 20;
-
     protected Pagination? Pagination { get; set; }
 
     protected override void OnInitialized()
@@ -140,7 +138,9 @@
 
     protected override void OnAfterRender(bool firstRender)
     {
-        if (firstRender && Pagination != null) Pagination.ClickPageCallback = pageIndex =>
+        if (firstRender && Pagination != null)
+        {
+            Pagination.ClickPageCallback = pageIndex =>
             {
                 if (pageIndex != PageIndex)
                 {
@@ -148,6 +148,12 @@
                     StateHasChanged();
                 }
             };
+            Pagination.PageItemsChangeCallback = () =>
+            {
+                Query(1);
+                StateHasChanged();
+            };
+        }
     }
 
     protected void Query(int pageIndex)
@@ -155,8 +161,10 @@
         var data = DataAccess.DictHelper.RetrieveDicts();
         if (!string.IsNullOrEmpty(DictCate?.SelectedItem?.Value)) data = data.Where(d => d.Define.ToString() == DictCate?.SelectedItem?.Value);
         ItemsCount = data.Count();
-        Items = data.Skip((pageIndex - 1) * PageItem).Take(PageItem);
+
-        PageCount = (int)Math.Ceiling(data.Count() * 1.0d / PageItem);
+        var pageItems = Pagination?.PageItems ?? 20;
+        Items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
+        PageCount = (int)Math.Ceiling(data.Count() * 1.0d / pageItems);
         PageIndex = pageIndex;
     }
 }

src/admin/Bootstrap.Admin/Shared/Pagination.razor

@@ -1,18 +1,29 @@
 @inherits PaginationBase
 
-<nav class="d-flex align-items-center" aria-label="分页组件">
-    <div class="pagination-bar">显示第 1 到第 20 条记录，总共 264 条记录 每页显示  条记录</div>
-    <ul class="pagination">
-        <li class="page-item" @onclick="MovePrev"><div class="page-link" aria-label="上一页"><i class="fa fa-angle-double-left"></i></div></li>
 <CascadingValue Value="this">
+    <nav class="d-flex align-items-center" aria-label="分页组件">
+        <div class="pagination-bar">
+            显示第 <span>@((PageIndex - 1) * PageItems + 1)</span> 到第 <span>@(Math.Min(PageIndex * PageItems, ItemsCount))</span> 条记录，总共 <span>@ItemsCount</span> 条记录 每页显示
+            <div class="btn-group dropup">
+                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@PageItems</button>
+                <div class="dropdown-menu">
+                    <div class="@(PageItems == 20 ? "dropdown-item active" : "dropdown-item")" @onclick="@(e => ClickItem(20))">20</div>
+                    <div class="@(PageItems == 40 ? "dropdown-item active" : "dropdown-item")" @onclick="@(e => ClickItem(40))">40</div>
+                    <div class="@(PageItems == 80 ? "dropdown-item active" : "dropdown-item")" @onclick="@(e => ClickItem(80))">80</div>
+                </div>
+            </div>
+            条记录
+        </div>
+        <ul class="@(PageCount == 1 ? "pagination d-none" : "pagination")">
+            <li class="page-item" @onclick="MovePrev"><div class="page-link" aria-label="上一页"><i class="fa fa-angle-double-left"></i></div></li>
             @for (int i = 1; i <= PageCount; i++)
             {
                 <PaginationItem Active="i == PageIndex" PageIndex="i"></PaginationItem>
             }
-        </CascadingValue>
             <li class="page-item" @onclick="MoveNext"><div class="page-link" aria-label="下一页"><i class="fa fa-angle-double-right"></i></div></li>
         </ul>
     </nav>
+</CascadingValue>
 
 @code {