{"id":29670192,"url":"https://github.com/marvinklein1508/blazor.pagination","last_synced_at":"2026-04-19T17:02:12.642Z","repository":{"id":64984855,"uuid":"580364941","full_name":"MarvinKlein1508/Blazor.Pagination","owner":"MarvinKlein1508","description":"A simple to use pagination component for Blazor Server and Blazor WebAssembly","archived":false,"fork":false,"pushed_at":"2023-01-10T07:55:31.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-02T03:50:08.860Z","etag":null,"topics":["blazor","csharp","pagination"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarvinKlein1508.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-20T11:34:10.000Z","updated_at":"2023-01-09T15:19:26.000Z","dependencies_parsed_at":"2023-01-13T15:05:13.784Z","dependency_job_id":null,"html_url":"https://github.com/MarvinKlein1508/Blazor.Pagination","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/MarvinKlein1508/Blazor.Pagination","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazor.Pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazor.Pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazor.Pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazor.Pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarvinKlein1508","download_url":"https://codeload.github.com/MarvinKlein1508/Blazor.Pagination/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarvinKlein1508%2FBlazor.Pagination/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279032733,"owners_count":26089387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","csharp","pagination"],"created_at":"2025-07-22T19:09:14.222Z","updated_at":"2025-10-15T00:57:01.811Z","avatar_url":"https://github.com/MarvinKlein1508.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor.Pagination\nA simple to use blazor component to implement a pagination based on Bootstrap 5.2.\n\n\n## Installation\n\nYou can install from Nuget using the following command:\n\n`Install-Package Blazor.Pagination`\n\nOr via the Visual Studio package manger.\n\n## Basic usage\nStart by add the following using statement to your root `_Imports.razor`.\n\n    @using Blazor.Pagination\n\nTo use the component, your page should define a public parameter for the current page and for the `TotalItems`. For example:\n\n```csharp\n    private int _page = 1;\n    [Parameter]\n    public int Page { get =\u003e _page; set =\u003e _page value \u003c 1 ? 1 : value; }\n    \n    public int TotalItems { get; set; }\n    \n    public async Task LoadAsync(bool navigateToFirstPage = false) \n    {\n        // Provide Page to your class or method\n        TotalItems = 100;// YOUR_METHOD_TO_FETCH_TOTAL_ITEMS;\n        // Do your Loading here.\n    }\n```\nWithin your function that loads the data you can forward the Page property to any class of method. Your method should also call another method to set `TotalItems`\n\n\nYour site should be accessible with two routes. For example:\n```csharp\n@page \"/Customer\"\n@Page \"/Customer/Page/{Page:int}\"\n```\n\n**Note: The route without a page directive should always default to 1. Make sure to check that Page is greater than or equal to 1.**\n\nThe component expects you to provide three parameters. \n| Parameter | Type | Function\n|---|---|---|\n|  Page | int  | The currently active page\n| TotalItems | int | The total amount of available items\n| NavUrl | string | The base for the generated nav-links.\n\nYou can embed the component in your `.razor` files like this:\n```csharp\n    \u003cPagination Page=\"Page\"\n                TotalItems=\"TotalItems\"\n                NavUrl=\"/Customer/Page/\" /\u003e\n```\n\n\n\nTo unify the use of the component, the component also provides the `IHasPagination` interface. This contains all needed properties as well as a function to Load the data.\n\n## EventPagination\nThis nuget package also offers another pagination component based on events. This one should be used when you don't want to provide the current page via URL.\n\nThe usage for this component is identical with the regular pagination component. The difference is that instead of providing a `NavUrl` as parameter, you'll need to provide an `EventCallback\u003cint\u003e`.\n```csharp\n    \u003cEventPagination Page=\"Page\"\n                TotalItems=\"TotalItems\"\n                PageChanged=\"OnPageChangedAsync\" /\u003e\n    \n    @code {\n        private async Task OnPageChangedAsync(int pageNumber)\n        {\n            Page = pageNumber;\n            await LoadAsync();\n        }\n\n        public async Task LoadAsync(bool navigateToFirstPage = false) \n        {\n            // Provide Page to your class or method\n            TotalItems = 100;// YOUR_METHOD_TO_FETCH_TOTAL_ITEMS;\n            // Do your Loading here.\n        } \n    }\n```\n\nThe component expects you to provide three parameters. \n| Parameter | Type | Function\n|---|---|---|\n|  Page | int  | The currently active page\n| TotalItems | int | The total amount of available items\n| PageChanged | EventCallback\u003cint\u003e | A callback function which does something based on the selected page number","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarvinklein1508%2Fblazor.pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarvinklein1508%2Fblazor.pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarvinklein1508%2Fblazor.pagination/lists"}