Components: How can I set pageIndex of paginator and it can update itself?

[mrdulin]

Bug, feature request, or proposal:

proposal

What is the expected behavior?

For example. When the paginator display 11-20 of 400 , I want to set the pageIndex to initial state. And after that, I want paginator display 1-10 of 400.

What is the current behavior?

First page is 0 and current page is 1, the paginator view display 11-20 of 400.

I set the pageIndex to initial state like this:

this.paginator.pageIndex = 0;

But the view of paginator not update. Still display 11-20 of 400.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "^4.3.1",
"@angular/material": "^2.0.0-beta.8",

[willshowell]

See https://github.com/angular/material2/issues/5904 and https://github.com/angular/material2/pull/5822

[mrdulin]

@willshowell

 public onSubmit(): void {
    const firstPage: number = this.pageIndex + 1;
    this.paginator.pageIndex = 0;
    this.diseaseDataBase.getDiseasesByPage(this.keyword, firstPage);
  }

first submit, the keyword is java, and go to page 1, paginator display: 11-20 of 400.

__But when I submit again with the same keyword java, the paginator still display: 11-20 of 400, even if I set paginator.pageIndex = 0.__

[andrewseguin]

Fixed by #5822

[mrdulin]

@andrewseguin I don't think it has been fixed. If you can test it to see.

I took a look for the source code of paginator.

/** The zero-based page index of the displayed list of items. Defaulted to 0. */
  @Input()
  get pageIndex(): number { return this._pageIndex; }
  set pageIndex(pageIndex: number) {
    this._pageIndex = pageIndex;
    this._changeDetectorRef.markForCheck();
  }
  _pageIndex: number = 0;

I found this._changeDetectorRef.markForCheck();. I think it's should be update the view when I set the paginator.pageIndex again. But it's not.

[willshowell]

@mrdulin the change made in #5822 is not part of beta-8. It will be available in the next release!

[mrdulin]

@willshowell oh. That's the reason. when is the next release ?

[TomBak5]

hy. I have same problem too. Sorry guys, but this.mdPaginator.pageIndex = 0; is not working for me when I do it in some custom function. Can anyone explain me how to go to first page without reloading the hole page? I tried it with angular/material 2.0.0-beta.(8,9,10) with respective CDK versions and it doesn't work as I expected.

[willshowell]

@pukuotas https://stackblitz.com/edit/material2-beta12-cw8aef?file=app%2Fapp.component.html

[srokatonie]

Full solution:

You need to declare paginator dom element as variable using #paginator

<!-- my.component.html -->
<mat-paginator #paginator></mat-paginator>

Then set every time you need to set pageIndex:

//my.component.ts
this.paginator._pageIndex = 0;

[dfhincapiem]

I do have done everything that you guys have been talking about. But when I set my component like this

TEST

And in the component

test() {
this.paginator.pageIndex = 1;
}

And when the page loads appears something like this:

Items per page:
10
1 - 10 of 26

And when I click the button, this appears:

tems per page:
10
11 - 20 of 26

It seems that the pageIndex was updated but the data of the table is not refreshed, please any help would be appreciated

[thw0rted]

@dfhincapiem see #8417, this is a known issue from over a year ago and I'm kind of amazed it hasn't been fixed yet. There is a hack / workaround described in that issue.

[andzejsw]

I made load more instead of paginator for my project needs.

private loadMore() { this.collection.paginator.pageSize += 1; this.collection.paginator._emitPageEvent(0) }

Basically _emitPageEvent(YourPageIndex) reloads page!

[maskalek]

MatPaginator contains method to move to the first page.

this.paginator.firstPage()

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}