Pagination

On Server Side:

Once you have an IQueryable<T> which has your stored command it it (i.e. the where and ordey by clauses) use .Skip and .Take to get the pages. 

Pass in:

  • pageNumber 
  • pageSize

Pass out:

  • Items - so they can be displayed
  • CurrentPage
  • ItemsPerPage
  • TotalItems - so this can be displayeded
  • TotalPages - so this can provide other pages to load

On Client Side

 Use PaginationModule from ngx-bootstrap.  This will provide navigation around the pages.
When loading a new page, set only the TotalItems and TotalPages to prevent triggering a seconp page load.





Comments

Post a Comment

Popular posts from this blog

Understanding the technologies - Angular 8 and ASP.NET Web API Core 3

Course Notes Yesterday, I followed some of the preview lessons and have taken the following points: Instead of using a Visual Studio template to create an integrated Angular and WebAPI project, I'm going to the follow the advice on the course to create these separately.  I'll use dotnet CLI to create the web API project and Angular CLI (ng) to create the separate Angular project. The following needed to be installed as prerequisites: .NET Core SDK V3.0 - This is required to create the WEB API project To check all that are installed - >dotnet --info To check the default version - >dotnet --version I already had V3.1 of the SDK installed so needed to switch back to the earlier version : NodeJS V12.16.3 - This is required to serve and run the Angular App NPM V6.14.5 - This is used to add libraries for for the Angular App (like nuget) I'm also going to be using VS Code rather than Visual Studio Community as my IDE.   I want to see how this work in ...
Read more

Bits and bobs

EF Global Filters These can be set up in OnModelCreating so that the default case is that the deleted items are not returned.  This can be overriden for specific queries using IgnoreQueryFilters. builder.Entity<Thing>().HasQueryFilter(p => p.Deleted); Displaying text over an Image For this we need to set the container div style to  position: relative and then the text to position: absolute.  Then set the bottom so that it appears in the corrrect place.
Read more