feat(Table): add IsAutoScrollTopWhenClickPage parameter

src/BootstrapBlazor.Server/Components/Samples/Table/TablesPages.razor

@@ -22,8 +22,8 @@
 <DemoBlock Title="@Localizer["TablesPageShowTopPaginationTitle"]"
            Introduction="@Localizer["TablesPageShowTopPaginationIntro"]"
            Name="ShowTopPagination">
-    <Table TItem="Foo"
-           IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" _pageItems="10" OnQueryAsync="@OnQueryAsync">
+    <Table TItem="Foo" IsAutoScrollTopWhenClickPage="true" IsFixedHeader="true" Height="200"
+           IsPagination="true" ShowTopPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />
             <TableColumn @bind-Field="@context.Name" />

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -78,7 +78,7 @@
     "TablesPagePaginationTitle": "Pagination table",
     "TablesPagePaginationIntro": "Set <code>IsPagination</code> to display the pagination component",
     "TablesPageShowTopPaginationTitle": "Show on top",
-    "TablesPageShowTopPaginationIntro": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component"
+    "TablesPageShowTopPaginationIntro": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component. You can use <code>IsAutoScrollTopWhenClickPage</code> to control whether to automatically scroll to the top after turning the page. The default value is <code>false</code> to keep the scroll bar position"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedColumn": {
     "TablesFixedColumnTitle": "Fixed column",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -78,7 +78,7 @@
     "TablesPagePaginationTitle": "分页表格",
     "TablesPagePaginationIntro": "设置 <code>IsPagination</code> 显示分页组件",
     "TablesPageShowTopPaginationTitle": "显示在顶端",
-    "TablesPageShowTopPaginationIntro": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件"
+    "TablesPageShowTopPaginationIntro": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件，可通过 <code>IsAutoScrollTopWhenClickPage</code> 控制是否翻页后自动滚动到顶端，默认值为 <code>false</code> 保持滚动条位置"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedColumn": {
     "TablesFixedColumnTitle": "固定列功能",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.6.4-beta06</Version>
+    <Version>9.6.4</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor.Pagination.cs

@@ -169,6 +169,12 @@ protected async Task OnPageLinkClick(int pageIndex)
 
             // 通知 SelectedRow 双向绑定集合改变
             await OnSelectedRowsChanged();
+
+            // 通知 UI 滚动到顶端
+            if(IsAutoScrollTopWhenClickPage)
+            {
+                await InvokeVoidAsync("scrollTop", Id);
+            }
         }
     }
 

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -759,6 +759,12 @@ public async Task ExpandDetailRow(TItem item)
     [Parameter]
     public Func<List<TItem>, bool>? DisableEditButtonCallback { get; set; }
 
+    /// <summary>
+    /// 获得/设置 翻页时是否自动滚动到顶部 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsAutoScrollTopWhenClickPage { get; set; }
+
     [CascadingParameter]
     private ContextMenuZone? ContextMenuZone { get; set; }
 
@@ -1055,7 +1061,7 @@ private async Task OnTableRenderAsync(bool firstRender)
                     },
                     new
                     {
-                        Key = "align-left",
+                        Key = "align-right",
                         Icon = "fa-solid fa-align-right",
                         Text = Localizer["AlignRightText"].Value,
                         Tooltip = Localizer["AlignRightTooltipText"].Value

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -21,6 +21,20 @@ export function init(id, invoke, options) {
     reset(id)
 }
 
+export function scrollTop(id) {
+    const table = Data.get(id)
+    if (table === null) {
+        return;
+    }
+
+    const body = table.tables.length === 2 ? table.tables[1] : table.tables[0];
+    body.parentElement.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+    });
+}
+
 export function reloadColumnWidth(tableName) {
     const key = `bb-table-column-width-${tableName}`
     return localStorage.getItem(key);

test/UnitTest/Components/TableTest.cs

@@ -980,6 +980,7 @@ public async Task PageItemsSource_Ok()
                 pb.Add(a => a.RenderMode, TableRenderMode.Table);
                 pb.Add(a => a.PageItemsSource, [2, 4, 8]);
                 pb.Add(a => a.IsPagination, true);
+                pb.Add(a => a.IsAutoScrollTopWhenClickPage, true);
                 pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
                 pb.Add(a => a.TableColumns, foo => builder =>
                 {
@@ -1058,7 +1059,7 @@ Task<QueryData<Foo>> MockOnQueryAsync(QueryPageOptions options)
             return Task.FromResult(new QueryData<Foo>()
             {
                 Items = items,
-                TotalCount = items.Count(),
+                TotalCount = 80,
                 IsAdvanceSearch = true,
                 IsFiltered = true,
                 IsSearch = true,