C#•3y ago

❔ Blazor Hosted - Client datatable with large dataset

I have a table component (using MudBlazor) which accesses the server-side API endpoint and pulls (currently) around 130k records. As you can imagine, too much for a client.

I need help and examples if possible on how I can implement client/server table pagination.

Any help is appreciated, thanks!

https://mudblazor.com/components/table#server-side-filtering,-sorting-and-pagination
(I followed this, but I don't quite understand its implementation for server-side, it seems all client-side to me.)

realivanjxツ•1/3/23, 4:25 AM

do u have api for pagination in the first place? if not then u need to make them first

Rrealivanjxツ do u have api for pagination in the first place? if not then u need to make them...

AmosOP•1/3/23, 10:19 AM

I have an endpoint, but it's just a simple fetch and return all.

AmosOP•1/3/23, 10:19 AM

I think that's my main question, how do I go about doing that on the server-side endpoint?

realivanjxツ•1/3/23, 10:21 AM

do you know how to query your database to return n items from x?

realivanjxツ•1/3/23, 10:21 AM

return 10 items from 100th entry for example

FusedQyou•1/3/23, 10:31 AM

MudBlazor has documentation for the table component. It has a specific section for "Server Side Filtering, Sorting and Pagination"

FusedQyou•1/3/23, 10:33 AM

Solution: work off that, and you pass the

TableState

TableState

Page

Page

and

PageSize

PageSize

as query parameters. Your server will then

skip

skip

Page * PageSize

Page * PageSize

and

take

take

PageSize

PageSize

. Adjust as needed.

FusedQyou•1/3/23, 10:33 AM

Assuming you use EntityFramework,

skip

skip

and

take

take

are the exact methods you need

FusedQyou•1/3/23, 10:34 AM

Regular SQL expressions are basically the same though

FusedQyou•1/3/23, 10:35 AM

If you want my tip: the .NET team is working on their own table variant called quickgrid. I like this better.
https://aspnet.github.io/quickgridsamples/

Intro

Samples using the QuickGrid component for Blazor.

AmosOP•1/3/23, 11:30 AM

Okay thanks both.

Should the skip/take reference be passed via url query? How do other people handle this?

AAmos Okay thanks both. 🙂 Should the skip/take reference be passed via url query? How...

FusedQyou•1/3/23, 11:34 AM

url query is usually used

FusedQyou•1/3/23, 11:35 AM

This is typescript, but you get the idea. This is how my methods usually look like.

FusedQyou•1/3/23, 11:36 AM

PaginationRequest on the client. I defaulted to the first page, and 3 per page.

FusedQyou•1/3/23, 11:37 AM

Usually your API will then return the total items in the database, and the actual result. Your paginator can then define the amount of pages by checking

ceil(totalItems / itemsPerPage)

ceil(totalItems / itemsPerPage)

FFusedQyou Usually your API will then return the total items in the database, and the actua...

AmosOP•1/3/23, 11:47 AM

Much appreciated for the complete answer.

AmosOP•1/3/23, 11:48 AM

I'll give this a go, thanks for your time!

Accord•1/4/23, 12:14 PM

Was this issue resolved? If so, run

/close

/close

otherwise I will mark this as stale and this post will be archived until there is new activity.

❔ Blazor Hosted - Client datatable with large dataset

Similar Threads

Similar Threads

Similar Threads