Pagination order bug

Open Q&A
, ,
#1

Has anyone run across a bug with the pagination where the next arrow can show up in the middle of the page options?
image

This always happens, with these steps:

  • Click on a page far ahead enough to make page 1 disappear (in my case page 4).
  • Then click on an earlier page, for example page 3.

These are my pagination options:

pagination({
	container: "#pagination",
	showFirst: false,
	showLast: false,
	padding: 2,
	templates: {
		previous: '',
		next: ''
	}
}),
1 Like
#2

Hello,

Could you create a minimal reproducible example to help us better understand the problem?

We provide a CodeSandbox template to avoid spending time setting up the environment.

#3

I’ve got the same issue. In some situation, the previous and next LI are inserted at the beginning of the pagination list, or at the wrong position.

To reproduce :

  • Click on any page number higher than 5
  • Then click on another page number :
    • It’s working fine if you go to a page higher than current page
    • But if the clicked page number is is below 5, the display is not correct.

pagination_1
pagination

1 Like
#4

Hello @daniel3 and @blomki
I can’t reproduce the issue.

Can you update the sandbox for reproduction?

#5

I wasn’t able to reproduce the bug in the sandbox using my algolia configuration settings. I didn’t have much time to work on it, so I simply solved it visually with flexbox order. For reference, my site is statically generated Vue/Nuxt, using the JS Algolia.

#6

The DOM output from the pagination widget is correct and haven’t heard of such issue so far. I assume there must be some bug regarding the custom styles you have. Glad to hear you sorted it out.
Let me know if you have any question.

#7

I’ve got the same issue. It shows correct results but it keeps showing the first page as current, and mixed-up buttons for navigation.

Screen Shot 2021-04-08 at 2.14.05 PM