How to do server side pagination on angular with entity framework core

angular asp.net-core entity-framework-core

Question

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.

1
1
3/29/2019 8:58:47 AM

Accepted Answer

Follow steps below to achieve your requirement:

  1. 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; }
    }
    
  2. 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;
    }
    
  3. Angular Model

    class PageResult<T>
    {
        count: number;
        pageIndex: number;
        pageSize: number;
        items: T[];
    }
    
  4. 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));
    }
    }
    
  5. 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

0
4/1/2019 6:46:14 AM


Related Questions





Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow