question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pagination option maxPages set to zero no longer hides individual pagination items

See original GitHub issue

Describe 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:

  1. Go to https://capacitype.github.io/prototype-gulp/
  2. See visible “1” in between the previous and next arrows in the bottom left of the UI.
  3. Compare to https://www.capacitype.io/embeds/tyr/main/ which uses the same widget configuration
  4. 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 🖥

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:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
jasonbellcommented, Aug 10, 2018

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!

0reactions
Haroenvcommented, Jul 10, 2019

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:

  1. make a custom pagination component which only shows next & previous
  2. hide the pagination with css

An example of that second approach is here: https://codesandbox.io/s/instantsearchjs-app-tmc2g

.ais-Pagination-item--page {
  display: none;
}
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found