[Paginator] Add jump-to-page functionality

[dushkostanoeski]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

To be able to jump to a specific page using a dropdown populated with page numbers. The dropdown should be next in line after the Items per page dropdown, so you can choose the page size and then the page number you want to go to.

Don't know if the following part is smart, but in use cases where the page number is large, a step input can be implemented. If the total number of pages is 500, and the step is 5, the Page number dropdown would hold only pages 1, 5, 10, 15, 20 .... so the user can get to the desired page in as little scrolling and as few clicks as possible.

What is the current behavior?

To get to a specific page you have to go page by page

What is the use-case or motivation for changing an existing behavior?

In my case, I have a 100 item per page list, that has 3500 total items sorted by date and the users land at the last page. If the users wants to check the items that were added at the beginning of the year, they know that they should be looking at items from 1 to at least 300, so that is 32 clicks to get to the desired items. As the total page count gets bigger, the harder it is to get to the last pages (first pages in my case).

[willshowell]

Maybe something like this will help in the mean time

https://stackblitz.com/edit/material2-beta12-fpf2ka?file=app%2Fapp.component.ts

[dushkostanoeski]

I have a working component that wraps around the paginator, adds the dropdown and all the events are bound to the same function so you don't need to have separate event handlers.

A paginator component should let you get to a specific page easily. I'd make a PR if the idea is considered acceptable.

[dushkostanoeski]

@andrewseguin will this get in on the next beta?

[andrewseguin]

@dushkostanoeski We haven't started work on something like this, especially since its out of the spec and we'd have to really consider how the UX would play out here

[Chris2011]

button for firstPage and lastPage is also needed, should I create a new ticket? Couldn't find a ticket until now for such functionality.

[Asad-Islam]

I think it's possible using the existing API. You can try like this...

 this.paginator.pageIndex = pageNumber, // number of the page you want to jump.
 this.paginator.page.next({      
      pageIndex: pageNumber,
      pageSize: this.paginator.pageSize,
      length: this.paginator.length
    });

where this.paginator is

@Input()
paginator: MatPaginator;

For jumping to a specific page you can add an input box or select box and execute that piece of code and for jumping to previous or last page two button could be added which could use that too.