doc(Table): update dyanmic datatable sample (#8103)

* refactor: 重构代码消除提示信息

* refactor: 重构代码

* doc: 重构示例代码

* doc: 增加多语言

* refactor: 重构代码

* doc: 更新示例

* chore: 更新文档

* refactor: 更改变量

* test: 更新单元测试

Author: ArgoZhang

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

@@ -7,21 +7,49 @@
 
 <h4>@Localizer["TablesDynamicDescription"]</h4>
 
+<p class="code-label">@Localizer["TablesDynamicNoteTitle"]</p>
+<p>@((MarkupString)Localizer["TablesDynamicNoteP1"].Value)</p>
+<p>@((MarkupString)Localizer["TablesDynamicNoteP2"].Value)</p>
+<p>@((MarkupString)Localizer["TablesDynamicNoteP3"].Value)</p>
+<Pre>private void CreatePageDataContext()
+{
+    _dataTableDynamicContext4 = new DataTableDynamicContext(_pageDataTable, (context, col) =>
+    {
+        var propertyName = col.GetFieldName();
+    })
+    {
+        UseCache = false
+    };
+}
+
+private void UpdatePageDataContext()
+{
+    var table = _dataTableDynamicContext4!.DataTable;
+    table.Rows.Clear();
+
+    foreach (var f in _pageData.Skip((_pageIndex - 1) * _pageItems).Take(_pageItems).ToList())
+    {
+        table.Rows.Add(f.Id, f.DateTime, f.Name, f.Count);
+    }
+
+    table.AcceptChanges();
+}</Pre>
+
 <DemoBlock Title="@Localizer["TablesDynamicDataTableTitle"]"
            Introduction="@Localizer["TablesDynamicDataTableIntro"]"
            Name="DataTable">
-    <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" IsFixedHeader="true" Height="300" />
+    <Table TItem="DynamicObject" DynamicContext="_dataTableDynamicContext1" IsFixedHeader="true" Height="300"></Table>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TablesDynamicEditTitle"]"
            Introduction="@Localizer["TablesDynamicEditIntro"]"
            Name="Edit">
     <section ignore>@((MarkupString)Localizer["TablesDynamicEditDescription"].Value)</section>
-    <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" ModelEqualityComparer="ModelEqualityComparer"
-           IsMultipleSelect="true" IsBordered="true" IsStriped="true" @bind-SelectedRows="SelectedItems" IsKeepSelectedRowAfterAdd="true"
-           ShowToolbar="true" ShowExtendButtons="true" />
+    <Table TItem="DynamicObject" DynamicContext="_dataTableDynamicContext2" ModelEqualityComparer="ModelEqualityComparer"
+           IsMultipleSelect="true" IsBordered="true" IsStriped="true" @bind-SelectedRows="_selectedItems" IsKeepSelectedRowAfterAdd="true"
+           ShowToolbar="true" ShowExtendButtons="true"></Table>
     <div class="mt-3">
-        @foreach (var item in SelectedItems)
+        @foreach (var item in _selectedItems)
         {
             <div>@item.GetValue(nameof(Foo.Name))</div>
         }
@@ -31,19 +59,23 @@
 <DemoBlock Title="@Localizer["TablesDynamicDynamicColTitle"]"
            Introduction="@Localizer["TablesDynamicDynamicColIntro"]"
            Name="DynamicCol">
-    <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" ModelEqualityComparer="ModelEqualityComparer"
+    <Table TItem="DynamicObject" DynamicContext="_dataTableDynamicContext3" ModelEqualityComparer="ModelEqualityComparer"
            IsMultipleSelect="true" IsBordered="true" IsStriped="true"
            ShowToolbar="true" ShowExtendButtons="true">
         <TableToolbarTemplate>
-            <TableToolbarButton Color="Color.Info" Icon="fa-fw fa-solid fa-circle-plus" Text="@ButtonAddColumnText" OnClick="OnAddColumn" />
-            <TableToolbarButton Color="Color.Secondary" Icon="fa-fw fa-solid fa-circle-minus" Text="@ButtonRemoveColumnText" OnClick="OnRemoveColumn" />
+            <TableToolbarButton Color="Color.Info" Icon="fa-fw fa-solid fa-circle-plus" Text="@_buttonAddColumnText"
+                                OnClick="@OnAddColumn">
+            </TableToolbarButton>
+            <TableToolbarButton Color="Color.Secondary" Icon="fa-fw fa-solid fa-circle-minus" Text="@_buttonRemoveColumnText"
+                                OnClick="@OnRemoveColumn">
+            </TableToolbarButton>
         </TableToolbarTemplate>
     </Table>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TablesDynamicPageTitle"]"
            Introduction="@Localizer["TablesDynamicPageIntro"]"
            Name="Pagination">
-    <Table TItem="DynamicObject" DynamicContext="DataTablePageDynamicContext" />
-    <Pagination PageCount="@PageCount" PageIndex="@PageIndex" OnPageLinkClick="@OnPageLinkClick" class="mt-3" />
+    <Table TItem="DynamicObject" DynamicContext="_dataTableDynamicContext4"></Table>
+    <Pagination PageCount="@_pageCount" PageIndex="@_pageIndex" OnPageLinkClick="@OnPageLinkClick" class="mt-3"></Pagination>
 </DemoBlock>