Pagination option maxPages set to zero no longer hides individual pagination items
See original GitHub issueDescribe the bug 🐛
Since updating to 2.10.0, using maxPages: 0
in the Pagination widget no longer works to hide all of the rendered pagination items.
To Reproduce 🔍 Steps to reproduce the behavior:
- Go to https://capacitype.github.io/prototype-gulp/
- See visible “1” in between the previous and next arrows in the bottom left of the UI.
- Compare to https://www.capacitype.io/embeds/tyr/main/ which uses the same widget configuration
- See no “1” pagination item rendered
Expected behavior 💭
In our current version, we wanted to have prev/next to move through the pages while not showing the individual pages. Setting the maxPages
option to 0
was giving us this. In testing v2.10.0, this same configuration no longer hides the individual page items as desired.
Screenshots 🖥
- Looks good v2.3.3: https://d.pr/i/MGqC2z
- Not so happy v2.10.0: https://d.pr/i/7VleSl
Additional context
Here is the relevant bits of widget implementation that tries to hide the individual page items, leaving just the prev and next links (shown as icons here).
// Pagination widget
const searchPagination = instantsearch.widgets.pagination({
container: '#pager',
maxPages: 0,
padding: 0,
showFirstLast: false,
});
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Limit the number of pages displayed in bootstrap 3 pagination
I have various web pages on my website which are using bootstraps (bootstrap 3) pagination but I need to know ...
Read more >Control pagination - Microsoft Support
When you set pagination options, you can control where automatic page break are inserted or override automatic page breaks.
Read more >Pagination - Ant Design
A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.
Read more >vue-awesome-paginate - npm
Start using vue-awesome-paginate in your project by running `npm i ... Example: you can set items per single page, maximum pagination ...
Read more >Angular Search & Pagination. with usage examples - ITNEXT
Our goal here is to provide an input to the user so he can type a search string to filter the results on...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I was kind of expecting to hear that the original behavior was the real bug. A more direct boolean option sounds great. Using negative value on the padding option would be fine but less clear and obvious.
In the meantime we’ll see if we can make a custom version using the connector. Thanks!
We have not heard from more requests for this feature since, which is why it seems not necessary to add it as an option unfortunately. Luckily you can do two things:
An example of that second approach is here: https://codesandbox.io/s/instantsearchjs-app-tmc2g