Manage paging server side instead of client. #1
Description
This component is great but needs a property where we can set the TotalItems instead of getting the count from the current items list so we can manage paging server side. The code should go something like this I haven't tested it yet but should work.
//We need the next extra props
/// <summary>
/// Total of Item for server side paging. This is not required field.
/// </summary>
[Parameter]
int TotalItems { get; set; }
/// <summary>
/// The Api URL to request the data. This is not required field.
/// </summary>
[Parameter]
string ApiUrl { get; set; }
protected override async Task OnInitAsync()
{
pagerSize = 5;
curPage = 1;
//Check if we are getting the records from the server side paged
if(!string.IsNullOrWhiteSpace(ApiUrl) && TotalItems != 0)
{
ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(TotalItems / (decimal)PageSize);
}
else
{
ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(Items.Count() / (decimal)PageSize);
}
SetPagerSize("forward");
}
public void updateList(int currentPage)
{
//Check if we are getting the records from the server side paged
if(!string.IsNullOrWhiteSpace(ApiUrl) && TotalItems != 0)
{
//We need to send to the serve the Page and RowsPerPage to filter on the search result
var getData = await Http.SendJson(HttpMethod.Post,ApiUrl, new
{
Page = currentPage,
RowsPerPage = PageSize,
//We could also do some advance options laters like this
//SortBy = SortBy ,
//Descending = Descending,
//SearchTerm = SearchTerm
});
//Server should return an object with the items and the count of total of items
ItemList = getData.Items
TotalItems = getData.TotalItems
}
else
{
ItemList = Items.Skip((currentPage - 1) * PageSize).Take(PageSize);
}
curPage = currentPage;
this.StateHasChanged();
}