分頁是一項重要功能，可幫助我們有效地加載大量數據。我們的 Syncfusion Blazor 文件管理器允許在分段頁面中顯示文件和文件夾，從而更輕松地瀏覽大型目錄。在文件管理器組件中處理大量數據時，此功能非常方便。此功能可用于有效地加載大量數據。我們的 Syncfusion Blazor 文件管理器允許在分段頁面中顯示文件和文件夾，從而更輕松地瀏覽大型目錄。在文件管理器組件中處理大量數據時，此功能非常方便。此功能從Essential Studio 2024 v3本開始提供。  

Essential Studio企業版可以幫助開發者創建豐富的應用程序，并輕松地集成商業智能分析和報告解決方案。Essential Studio企業版是世界級的軟件組件，它使得開發者能在最苛刻的環境下開發出高質量的軟件。

Essential Studio Enterprise 2024 v3最新版下載

讓我們從在文件管理器中啟用分頁和可用的可自定義選項的步驟開始。

在 Blazor 文件管理器中啟用分頁

要啟用分頁，請按照以下步驟操作：

• 步驟 1：創建 Blazor 應用程序

首先創建一個 Blazor 應用程序并渲染文件管理器組件。有關更詳細的步驟，請參閱入門文檔。

• 第 2 步：啟用分頁

將AllowPaging屬性設置為 true 以激活分頁，如下所示。

@using Syncfusion.Blazor.FileManager; 
@using Syncfusion.Blazor.Navigations; 
  
<SfFileManager  TValue="FileManagerDirectoryContent" AllowPaging="true"> 
 <FileManagerAjaxSettings Url="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" 
                          UploadUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" 
                          DownloadUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" 
                          GetImageUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> 
 </FileManagerAjaxSettings> 
</SfFileManager> 

• 步驟 3：分頁操作

當AllowPaging屬性設置為 true 時，分頁器將呈現在文件管理器的底部，允許您通過頁面瀏覽數據。請參閱下圖。

具有分頁功能的 Blazor 文件管理器

自定義分頁

Blazor 文件管理器允許您根據應用程序的需求自定義分頁選項。以下是一些關鍵選項：

• NumericItemsCount：控制顯示多少頁碼。
• CurrentPage：定義當前顯示的頁面。
• PageSize：設置每頁顯示多少條記錄。
• PageSizes：調整頁面大小下拉菜單中可用的選項。提到的PageSize必須是PageSizes屬性中的值之一，才能在 Pager 下拉菜單中首先選擇它。  

@using Syncfusion.Blazor.FileManager 
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true" Path="/Text Documents/"> 
 <FileManagerAjaxSettings Url="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" 
                          UploadUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" 
                          DownloadUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" 
                          GetImageUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> 
  
 </FileManagerAjaxSettings> 
 <FileManager PageSettings PageSize="5" CurrentPage="2" NumericItemsCount="5" PageSizes="@(new List<int>(){5,10,25,50})"> 
 </FileManagerPageSettings> 
</SfFileManager>

請參閱下圖。

自定義分頁

傳呼機模板

FileManagerPageSettings中的 Template 屬性允許您將自定義 UI 元素（例如按鈕或任何 HTML 元素）插入到文件管理器頁面設置中。這為分頁用戶界面提供了更大的靈活性和自定義性。有關模板自定義的更多詳細信息，請參閱文檔。請參閱下圖。

Blazor 文件管理器中的 Pager 模板

如何導航到特定頁面

通過調用GoToPageAsync方法，您可以將要導航的頁碼作為參數傳遞給此方法，從而導航到特定頁面。

分頁事件

文件管理器提供了兩個事件來檢測頁面變化：

• PageChanging ：此事件在當前頁面更改之前觸發，允許您在導航之前處理操作。在需要的情況下，還可以使用PageChangingEventArgs取消頁面導航。
• PageChanged：頁面切換后觸發此事件，允許您在頁面改變后執行加載新數據等操作。

請參閱以下代碼示例。

@using Syncfusion.Blazor.FileManager; 
@using Syncfusion.Blazor.Navigations; 
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true"> 
 <FileManagerAjaxSettings Url="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" 
                          UploadUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" 
                          DownloadUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" 
                          GetImageUrl="http://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> 
 </FileManagerAjaxSettings> 
 <FileManagerEvents TValue="FileManagerDirectoryContent" PageChanging="OnChanging" PageChanged="OnChanged"> </FileManagerEvents> 
</SfFileManager> 
@code { 
    public void OnChanging(PageChangingEventArgs args) 
    { 
        //Perform the required action before the page is changed. 
    } 
    public void OnChanged(PageChangedEventArgs args) 
    { 
        // Perform the required action before the page is changed. 
    } 
} 

請參閱下圖：

Blazor 文件管理器中的分頁事件

響應式布局

Blazor 文件管理器分頁器還可以智能地運行，并根據分頁器尺寸響應性地更改其 UI。其優化的設計可在不同的設備上提供最佳的 UI 交互。

當瀏覽器窗口調整大小時，Pager 中的元素將自動調整。優點在于，無需特定屬性支持即可在文件管理器中啟用此功能。

請參閱下圖。

Blazor 文件管理器中的響應式布局