I Skip And Take the data in Controller Class, how to do pagination on angular
My Controller Class
public IEnumerable<ScrapeTime> scrapeTime(int? page, int pagesize=10)
{
var countDetails = _context.ScrapeTime.Count();
return _context.ScrapeTime.Skip((page ?? 0) * pagesize).Take(pagesize).ToList();
}
My component.ts file
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
http.get<scrapeTime[]>(baseUrl + 'api/ScrapeTime/ScrapeTime').subscribe(result => {
this.Time = result;
}, error => console.error(error));
}
The output will show only 10 data on the side, i need to do a pagination for all the data.
Follow steps below to achieve your requirement:
Define a model which will return items count and item details:
public class PageResult<T>
{
public int Count { get; set; }
public int PageIndex { get; set; }
public int PageSize { get; set; }
public List<T> Items { get; set; }
}
Controller action
public PageResult<ScrapeTime> scrapeTime(int? page, int pagesize = 10)
{
var countDetails = _context.ScrapeTime.Count();
var result = new PageResult<ScrapeTime> {
Count = countDetails,
PageIndex = page ?? 1,
PageSize = 10,
Items = _context.ScrapeTime.Skip((page - 1 ?? 0) * pagesize).Take(pagesize).ToList()
};
return result;
}
Angular Model
class PageResult<T>
{
count: number;
pageIndex: number;
pageSize: number;
items: T[];
}
Angular action
export class FetchDataComponent {
private http: HttpClient;
private baseUrl: string;
public Time: scrapeTime[];
public pageNumber: number = 1;
public Count: number;
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.http = http;
this.baseUrl = baseUrl;
http.get<PageResult<scrapeTime>>(baseUrl + 'api/ScrapeTime/ScrapeTime').subscribe(result => {
this.Time = result.items;
this.pageNumber = result.pageIndex;
this.Count = result.count;
}, error => console.error(error));
}
public onPageChange = (pageNumber) => {
this.http.get<PageResult<scrapeTime>>(this.baseUrl + 'api/ScrapeTime/ScrapeTime?page=' + pageNumber).subscribe(result => {
this.Time = result.items;
this.pageNumber = result.pageIndex;
this.Count = result.count;
}, error => console.error(error));
}
}
View
<table>
<tr *ngFor="let item of Time | paginate: { itemsPerPage: 10, currentPage: pageNumber, totalItems:Count }">
<!-- content here -->
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
<pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
</table>
If you have any issue with angular pagination, follow ngx-pagination