Example of Pager Template in Blazor Pager Component
This sample demonstrates how to customize the pager UI using Template support.
Order ID | Customer Name | Order Date | Freight | Shipped Date |
|---|
| 1001 | ANANTR | 4/1/2025 | $2.10 | 4/3/2025 |
| 1002 | BOLID | 3/31/2025 | $4.20 | 4/4/2025 |
| 1003 | ANTON | 3/30/2025 | $6.30 | 4/5/2025 |
| 1004 | ALFKI | 3/29/2025 | $8.40 | 4/6/2025 |
| 1005 | ANTON | 3/28/2025 | $10.50 | 4/7/2025 |
| 1006 | ANANTR | 3/27/2025 | $12.60 | 4/8/2025 |
| 1007 | ALFKI | 3/26/2025 | $14.70 | 4/9/2025 |
| 1008 | ANANTR | 3/25/2025 | $16.80 | 4/10/2025 |
| 1009 | ANTON | 3/24/2025 | $18.90 | 4/11/2025 |
| 1010 | ANTON | 3/23/2025 | $21.00 | 4/12/2025 |
Page
of 8
The Blazor Pager has an option to customize the pager UI using the Template property. In this demo, we have rendered two anchor tags for navigating next and previous pages. And the pager info detail is displayed inbetween those two anchor tags.
The anchor tags will be disabled based on the current page number using Pager APIs.