#community-help

Adjusting Result Item Numbering Across Pagination

TLDR A asked how to adjust numbering across pages of search results. Kishore Nallan suggested a CSS rule, while Greg advised using array indices or the start attribute. Jason referred to using __hitIndex in instantsearch.

Powered by Struct AI

1

14
21mo
Solved
Join the chat
Feb 05, 2022 (21 months ago)
A
Photo of md5-fe034fbff44e9cae037b7bb23a5080c4
A
11:35 AM
Q: The hits are always numbered 1..N..is it possible to take the page number into account? 20 hits per page, the first item on page #1 would be โ€œ1โ€, first item on page #2 would be โ€œ21" โ€ฆthe current fixed 1..N numbering is counter-intuitive.
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
11:50 AM
๐Ÿ‘‹ We don't number the hits in the API responses. Can you post a snippet or screenshot to show that?
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
01:30 PM
Ah, you mean the numbers always starting with "1" in the UI even when I click on page 2, 3, etc.?
A
Photo of md5-fe034fbff44e9cae037b7bb23a5080c4
A
01:31 PM
yes
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
01:32 PM
I see the HTML is being rendered using <li> -- that explains those 1 to 10 numbering.
A
Photo of md5-fe034fbff44e9cae037b7bb23a5080c4
A
01:32 PM
using an outer ordered list
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
01:34 PM
You can probably add a CSS list-style: none rule to remove that numbering, but Jason might have an alternative approach here.
Greg
Photo of md5-cc95589a5ca309cc60c36b7e901d749b
Greg
02:52 PM
Or use ul (unordered list) instead of ol (ordered list).
02:54
Greg
02:54 PM
If you retain all the results in memory (page #1, #2, #3, etc) then you could likely use the array index to apply the numbering yourself even with techniques like virtualization (windowing).
02:55
Greg
02:55 PM
(or something like pageNumber + index + 1 if you don't)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
03:00 PM
It looks like instantsearch might have a way to manage ordering like what Greg mentioned using __hitIndex. Could you try this out: https://www.algolia.com/doc/api-reference/widgets/hits/js/#widget-param-item
CaptainCodeman
Photo of md5-d3a4ca49ba4aeb3b9d0cb7d846eb0989
CaptainCodeman
04:09 PM
if the numbering is coming from an <ol> element there is a start attribute that lets you set the number sequence starting point

1