本示例是AntDesign Blazor的入門示例，在學習的同時分享出來，以供新手參考。

示例代碼倉庫：https://gitee.com/known/BlazorDemo

1. 學習目標

• 分頁查詢框架
• 天氣數據分頁功能
• 表格自定義分頁

2. 創建分頁查詢框架

Table組件分頁默認為前端分頁，即所有數據一次性加載到前端進行分頁；在實際項目中，大多數都是后端分頁，即根據前端提供的分頁參數只查詢一頁數據返回給前端顯示。下面我們搭建一個簡易的分頁查詢框架：

1）添加新類庫項目，命名為BlazorDemoCore，為什么要新建類庫項目？

• 一是查詢框架是通用的，所有項目都可以使用
• 二是將框架封裝在類庫中，便于其他項目引用
• 三是框架代碼與項目代碼隔離，避免被篡改

2）查詢條件類

在類庫BlazorDemoCore中添加查詢條件類PagingCriteria，該類用于前端封裝查詢條件參數傳遞給后端，后端根據該類信息從數據庫中查詢分頁數據給前端顯示。

3）查詢結果類

在類庫BlazorDemoCore中添加查詢結果類PagingResult，該類用于后端將查詢結果封裝起來傳遞給前端，前端根據該類信息分頁顯示。該類提供泛型，泛型類型為每條數據的類型。

3. 修改天氣數據后端查詢

1）首先在AntDesignDemo項目中引用框架項目BlazorDemoCore，右擊項目添加項目引用，引用后項目文件內容如下：

2）雙擊WeatherService類文件，修改天氣數據查詢方法，方法參數改成查詢條件，返回值改成查詢結果。

4. 修改天氣數據前端分頁功能

1）雙擊_Imports.razor文件添加框架命名空間。

2）雙擊Weather.razor文件，刪除如下幾行代碼。

3）修改Table組件屬性，綁定分頁參數和查詢結果，添加分頁事件OnChange的同時必須添加TItem屬性。

4）添加表格分頁查詢事件，將頁碼和每頁大小賦給查詢條件，修改查詢方法和默認查詢條件。

5）修改完成，點擊運行按鈕查看運行效果。

5. 表格分頁自定義樣式

Table組件分頁默認顯示在左下角，下面介紹如何顯示在有下角，并且顯示總條數，改變每頁大小和快速跳轉某頁。

1）顯示在右下角，在Table組件上添加屬性PaginationPosition="bottomRight"即可，運行效果如下

2）若要顯示總條數及切換每頁大小和快速跳轉，則要隱藏默認分頁，使用分頁模板來實現。

• 將PropertyColumn移到ChildContent中
• 添加PaginationTemplate，在其內部添加Pagination組件
• 顯示總條數，添加ShowTotal屬性
• 顯示切換每頁大小，添加ShowSizeChanger屬性
• 顯示快速跳轉頁碼，添加ShowQuickJumper屬性

3）修改完成，點擊運行按鈕查看運行效果。

6. 視頻

https://www.bilibili.com/video/BV19b4y157bk/

總結

以上是生活随笔為你收集整理的AntDesignBlazor示例——分页查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。