Pagination: improve handling of many pages

[jdanyow]

We ran into an issue on Q&A:
task-395246

[jdanyow]

Fleshing out the guidance from @Courtny - does this look good folks?

One page:
(hide pagination control)

Two pages:
page 1        [*1*][ 2 ][ > ]
page 2   [ < ][ 1 ][*2*]

Three pages:
page 1        [*1*][ 2 ][ 3 ][ > ]
page 2   [ < ][ 1 ][*2*][ 3 ][ > ]
page 3   [ < ][ 1 ][ 2 ][*3*]

Four pages:
page 1        [*1*][ 2 ][ 3 ][ 4 ][ > ]
page 2   [ < ][ 1 ][*2*][ 3 ][ 4 ][ > ]
page 3   [ < ][ 1 ][ 2 ][*3*][ 4 ][ > ]
page 4   [ < ][ 1 ][ 2 ][ 3 ][*4*]

Five pages:
page 1        [*1*][ 2 ][ 3 ][ 4 ][ 5 ][ > ]
page 2   [ < ][ 1 ][*2*][ 3 ][ 4 ][ 5 ][ > ]
page 3   [ < ][ 1 ][ 2 ][*3*][ 4 ][ 5 ][ > ]
page 4   [ < ][ 1 ][ 2 ][ 3 ][*4*][ 5 ][ > ]
page 5   [ < ][ 1 ][ 2 ][ 3 ][ 4 ][*5*]

Six pages:
page 1        [*1*][ 2 ][ 3 ][ 4 ][ 5 ][ 6 ][ > ]
page 2   [ < ][ 1 ][*2*][ 3 ][ 4 ][ 5 ][ 6 ][ > ]
page 3   [ < ][ 1 ][ 2 ][*3*][ 4 ][ 5 ][ 6 ][ > ]
page 4   [ < ][ 1 ][ 2 ][ 3 ][*4*][ 5 ][ 6 ][ > ]
page 5   [ < ][ 1 ][ 2 ][ 3 ][ 4 ][*5*][ 6 ][ > ]
page 6   [ < ][ 1 ][ 2 ][ 3 ][ 4 ][ 5 ][*6*]

Seven or more pages:
page 1               [*1*][ 2 ][ 3 ][ 4 ] ... [ 7 ][ > ]
page 2          [ < ][ 1 ][*2*][ 3 ][ 4 ] ... [ 7 ][ > ]
page 3          [ < ][ 1 ][ 2 ][*3*][ 4 ] ... [ 7 ][ > ]
pages 4 to N-3  [ < ][ 1 ] ... [ 3 ][*4*][ 5 ] ... [ 7 ][ > ]
page N-2        [ < ][ 1 ] ... [ 4 ][*5*][ 6 ][ 7 ][ > ]
page N-1        [ < ][ 1 ] ... [ 4 ][ 5 ][*6*][ 7 ][ > ]
page N          [ < ][ 1 ] ... [ 4 ][ 5 ][ 6 ][*7*]

page 1               [*1*][ 2 ][ 3  ][ 4  ] ...  [ 99 ][ >  ]
page 2          [ < ][ 1 ][*2*][ 3  ][ 4  ] ...  [ 99 ][ >  ]
page 3          [ < ][ 1 ][ 2 ][*3* ][ 4  ] ...  [ 99 ][ >  ]
pages 4 to N-3  [ < ][ 1 ] ... [ 3  ][*4* ][ 5  ] ...  [ 99 ][ > ]
page N-2        [ < ][ 1 ] ... [ 96 ][*97*][ 98 ][ 99 ][ >  ]
page N-1        [ < ][ 1 ] ... [ 96 ][ 97 ][*98*][ 99 ][ >  ]
page N          [ < ][ 1 ] ... [ 96 ][ 97 ][ 98 ][*99*]

[wibjorn]

This is also the case with the docs search page. https://docs.microsoft.com/en-us/search/?terms=search%20the%20web&skip=40

Should both of those pages be updated to display ellipses too?

[jdanyow]

Right- we're confirming the behavior of the JS when representing more than a few pages (the [ < ][ 1 ] ... [ 3 ][*4* ][ 5 ] ... [ 99 ][ > ] case).

re: search, I'm glad you brought that up. Do we want to use this experience when the number of pages is in the 10s of thousands?

For example, the site search link you shared @wibjorn would look like this:

[ < ][ 1 ] ... [ 3  ][*4* ][ 5  ] ...  [ 15,924 ][ > ]

[disimmon]

re: search, sort of edge case but that total number can easily go 100K+ for search so might need some abbreviation eventually. Looks like github caps the # of pages they'll show in search to 100. Showing total # of pages makes sense to me otherwise.

[Courtny]

@jdanyow @wibjorn Is this discussion resolved?

[Courtny]

I think the only outstanding question I see here is:

1. Truncation of the total number of pages in the indicator for very large numbers exceeding [X] characters?