More Complex Pagination

[erich3000]

I am using Mainroad since last week and i am really happy with it. thank you @Vimux for the great work.

As i have a lot of content i need a more complex pagition. the current [<][x/y][>] is not sufficient. furthermore i think it is hard to use from a user perspective, if i want to reach for exampe page 7.

i suggest to be able to configure a more complex pagintion.

[Params.pagination] use_complex = true # use the complex pagination use_first_and_last_button = true # the user is able to jump to the first or last page with on click max_num_of_buttons = 5 # how many buttons should be shown before using ellipsis

The Pagination should then look like that

[<<][<][..][5][6][7][8][9][..][>][>>]

i am already working on a proof a of concept and would be happy to raise a PR later on if this would be usefull to others

[Vimux]

Hi @erich3000,

I agree with you, such types of pagination are best suited for sites with a large number of pages.

However, it seems to me that this problem must be solved from a design point of view in mind also. Several design pitfalls can degrade the whole user experience. It is a difficult task. I expect to see examples of all possible important design states in any form (design in design tools, draft PR, ...). Until then, I don't quite understand how this pagination should work and look in most edge cases. The devil is in the detail.

---

use_first_and_last_button = true # the user is able to jump to the first or last page with on click

[<<][<][..][5][6][7][8][9][..][>][>>]

Why not just show the first and the last page as a clickable item, just like any other pages without additional params and items like [>>]?

For example:

[1][..][5][6][7][8][9][..][20] [>] # this pagination contains 20 pages

[<<][<][..][5][6][7][8][9][..][>][>>] # how many pages contains this pagination?

[erich3000]

Hi @Vimux,

and i agree with you. When i started to implement the pagination, i recognized (again) very fast that there are a lot of pitfalls in a "simple" ui-component like a pagination. and i totally neglected mobile users.

After that i stopped it and then there was a lot of other stuff i had to do in other projects. Now i will start with pen and paper and make a concept first. I will share that with you as soon as i have a good solution.

[erich3000]

Hi @Vimux,

I came up with the following. To get a feeling how it would look like on my blog i created a (non funtional) concept page there:

https://foodie.yamwoonsen.de/__concepts/pagination/

There you can also test it in mobile view.

[Vimux]

@erich3000,

First of all, sorry for the delay - I've been crazy busy. Thanks for your patience!

---

• Ellipsis pagination items should be visually identifiable from other elements. It looks like active elements, but it's not, right?

• Forward ellipsis pagination item clickable for some reason in some cases (3/7, 4/7, …)?

• Backward pagination item looks good only when the pagination is centered and we can add some space between this item(s) and numbers. I propose to drop this item because of the next point also.

• First page should be accessible and remains on the same place no matter what (3/7, 17/23, …). I don't mean desktop + mobile right now, but if I'm on a desktop, I want to click on the same place and return to the first page (muscle memory). In other words, "don't make me think".

  Floating first pagination page:

  1 / 7 (first position)

  [1][2][3][…][7] [>]
  

  2 / 7 (second position)

  [<][1][2][…][7] [>]
  

  3 / 7 (none)

  [<][…][3][…][7] [>]
  

• Add 2 adjacent pages to the left and the right of the current page. So that the user can navigate through one page without extra click:

  [1][…][7][8][*9*][10][11][…][30] [>]
  

  Plus, don't forget about additional exceptions, especially fifth pages from beginning and from end (I use 5 as a base number).

[erich3000]

Hi @Vimux, thanks for you reponse and your input!

The ider of the fixed first page makes a lot of sense! that and a lot of playing around with where-to-put-ellipsis-items and which items should be neighbours combined with the concern for mobile usage brought me to a new concept with a included dropdown box. i implemented that idea already on my blog (https://foodie.yamwoonsen.de/ see the bottom) and let people test it there.

I will be on holiday for the next two weeks, so there will be no update from my side.