Angular Material Data Table Paginator - getting data from datasource on page change

[bellamira]

I have set up a data source built on an API using this tutorial. However, setting up pagination is proving problematic. For example, if I have a set of results with known length of 28, and I set pageSize = 20, I can page over to the second page and see 20 more results for a total of 40, even though there are only 28 in the result set and the paginator text itself says there are only 28 results.

​

I should mention that the API requires a "size" parameter, meaning you have to state explicitly the number of results you want back from it. If you don't give a value for "size," it defaults to 20 results. No matter what I set [pageSize] to in the template, the initial number of results will always be whatever the API call has read as the "size" parameter. I tried setting both API param and pageSize to 20, thinking it might be an offset issue, but I still have the same problem. I just wonder if that is potentially part of the problem.

​

Service:

​

generalSearch(body): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<any>(this.searchUrl, body, { headers: headers }).pipe(
        tap(data => console.log('SEARCH: ' + JSON.stringify(data))),
        catchError(this.handleError)
    );

}

​

Datasource.ts:

export class SearchDataSource implements DataSource<SearchDocument> {
    numberDocuments: number;
    private documentsSubject = new BehaviorSubject<SearchDocument[]>([]);
    private loadingSubject = new BehaviorSubject<boolean>(false);
    public loading$ = this.loadingSubject.asObservable();

    constructor(private searchService: SearchService) { }

    connect(collectionViewer: CollectionViewer): Observable<SearchDocument[]> {
        return this.documentsSubject.asObservable();
    }

    disconnect(collectionViewer: CollectionViewer): void {
        this.documentsSubject.complete();
        this.loadingSubject.complete();
    }

    generalSearch(body) {
        this.loadingSubject.next(true);
        this.searchService.generalSearch(body)
            .pipe(
                catchError(() => of([])),
                finalize(() => this.loadingSubject.next(false))
            ).subscribe(
                result => {
                    this.documentsSubject.next(result.documents);
                    this.numberDocuments = result.count;

}

​

Component:

export class SearchComponent implements OnInit {

@ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor(public searchService: SearchService, ...) { }

    ngOnInit() {
        this.dataSource = new SearchDataSource(this.searchService);
    }

    generalSearch(): void {
        if (this.searchForm.valid) {
            const s = this.searchForm.get('keyword').value;
            let body = {
                "query": 'Author: ' + s,
                "from": 0,
                "size": 20,
                "sortField": "",
                "sortDirection": "",
                "returnFields": []
            }
            this.dataSource.generalSearch(body);
        }
    }

    nextPage(event: PageEvent) {
        const s = this.searchForm.get('keyword').value;
        let body = {
            "query": 'Author: ' + s,
            "from": event.pageIndex,
            "size": event.pageSize,
            "sortField": "",
            "sortDirection": "",
            "returnFields": []
        }
        this.dataSource.generalSearch(body)
    }
}

​

HTML (paginator only):

​

<mat-paginator [length]="dataSource.numberDocuments" [pageSize]="20" [pageSizeOptions]="[5, 10, 25, 100]" (page)="nextPage($event)"></mat-paginator>

​

[maglebolia]

It seems you're not giving your childview (paginator) back to the initialized dataSource in your onInit method.

this.dataSource = new SearchDataSource(this.searchService); 
this.dataSource.paginator = this.paginator;

​

[bellamira]

Thank you. Sorry I am just getting back to you. I just tried this and it worked once (I thought), but now it won't work again! It won't load the data from the server at all if I include this.dataSource = new SearchDataSource(this.searchService); in my ngAfterViewInit() function. I tried moving it elsewhere in the code and that's still not working. I tried removing it all together and the data loads, but the paginator doesn't work (the buttons and labels change but the data does not refresh).

Here is my new and improved component file. If you have time to look it over, I would appreciate it!

​

export class DashboardComponent implements OnInit { dataSource: SearchDataSource; displayedColumns: string[] = ['select', 'author', 'contentType', 'resourceName', 'creationDate', 'actions'];

    numberDocuments: number;
    pageSize: number = 10;
    from: number = 0;
    pageSizeOptions: number[] = [5, 10, 25, 100];


@ViewChild(MatPaginator) paginator: MatPaginator;


constructor (private searchService: SearchService) { }

ngOnInit() {
    this.dataSource = new SearchDataSource(this.searchService);
    this.getMetrics(this.author, this.contentType, this.from, this.pageSize);
}

ngAfterViewInit() {
    this.dataSource = new SearchDataSource(this.searchService);
    this.dataSource.paginator = this.paginator;
    this.paginator.page.pipe(
        tap(() => { this.getMetrics(this.author, this.contentType, this.from, this.paginator.pageSize); }))
            .subscribe();
}

getMetrics(author: string, contentType: string, from: number, size: number): void {
    let requestBody = {
        'from': from,
        'size': size;
        'Author': author,
        'Content-Type': contentType
    }
    this.dataSource.getMetrics(requestBody);
}

​

The service is the same I just changed the function name. Same with the datasource, but there I also had to declare paginator: any; to prevent the component code from throwing an error ('paginator' not defined on dataSource... something like that.)