Zikula 3.0.3 with Bootstrap 3.0.3 Theme: Pagination should fit in one row

[MisterFau]

Q	A
Zikula Version	3.0.3

Summary

When you have a lage list of entries in a list, the pagination links fills many rows. That looks bad an offers no good user experience

Desired Behavior

The pagination links should fit in only one row. I think this is usual.

Possible Solution

There are many solotions and examples. e.g. https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/

Context

I have large lists and so the pagination links fills many rows. That looks bad an offers no good user experience

[MisterFau]

[craigh]

how do you suggest this should look?

[MisterFau]

Something like this for example:

[Guite]

Just saw this:

After clicking on the three dots a modal appears allowing to choose a page number:

[MisterFau]

Not bad. But why not an input field instead of the three dots, where you directly can enter the desired page number?

[Guite]

Because it could be confusing to some users?

[MisterFau]

Hmm. Maybe. But i just saw this: https://ux.stackexchange.com/questions/83328/how-to-show-pagination-go-to-page-text-box/83329

[Guite]

Indeed a good point 😉

[craigh]

here is an example: https://flaviusmatis.github.io/simplePagination.js/

I provide this only for reference, I do not suggest using this library.

I would like to somehow accomplish any changes to our current pagination only in JS. Ideally, this JS would still use the bootstrap styles. Do either of you know enough JS to help?

[craigh]

On the other hand, this is what stackoverflow has:

you cannot navigate to the hidden posts without paging through.

[MisterFau]

here is an example: https://flaviusmatis.github.io/simplePagination.js/

i like it!

I provide this only for reference, I do not suggest using this library.
I would like to somehow accomplish any changes to our current pagination only in JS. Ideally, this JS would still use the bootstrap styles. Do either of you know enough JS to help?

I unfortunately do not.

[MisterFau]

Thank you! Works very well!