Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination from serverside not working #5

Open
kolkov opened this issue May 28, 2018 · 1 comment
Open

Pagination from serverside not working #5

kolkov opened this issue May 28, 2018 · 1 comment

Comments

@kolkov
Copy link

kolkov commented May 28, 2018

Please update code for paginator correct working...

loadLessons(courseId:number,
                filter:string,
                sortDirection:string,
                pageIndex:number,
                pageSize:number) {

        this.loadingSubject.next(true);

        this.coursesService.findLessons(courseId, filter, sortDirection,
            pageIndex, pageSize).pipe(
                catchError(() => of([])),
                finalize(() => this.loadingSubject.next(false))
            )
            .subscribe((lessonList: LessionList) => {
               this.lessonsSubject.next(lessonList.payload)
               this._updatePaginator(lessonsList.total)
      });
}

get paginator(): MatPaginator | null { return this._paginator; }
  set paginator(paginator: MatPaginator|null) {
    this._paginator = paginator;
    //this._updateChangeSubscription();
  }
  private _paginator: MatPaginator|null;
  
  _updatePaginator(filteredDataLength: number) {
    Promise.resolve().then(() => {
      if (!this.paginator) { return; }

      this.paginator.length = filteredDataLength;

      // If the page index is set beyond the page, reduce it to the last page.
      if (this.paginator.pageIndex > 0) {
        const lastPageIndex = Math.ceil(this.paginator.length / this.paginator.pageSize) - 1 || 0;
        this.paginator.pageIndex = Math.min(this.paginator.pageIndex, lastPageIndex);
      }
    });
  }

then update server side and CoursesService to get LessionList from server.

LessionList {
  payload: lession[];
  total: number
}

and then insert this line after dataSource initialization in CourseComponent:

this.dataSource.paginator = this.paginator;

This implementation work correctly.

@moldovans
Copy link

you can do it yourself, propose a project modification. and fix your "lession" vs "lesson"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants