You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: learn/advanced/pagination.md
+5-9Lines changed: 5 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,12 +14,10 @@ Because of this, we do not recommend creating interfaces with page selectors. If
14
14
15
15
Many other pagination UIs are fully compatible with Meilisearch, such as infinite scrolling and buttons that manually load more results on click. For an experience similar to page selection, we recommend creating pagination interfaces centered around [previous and next buttons](#recommended-previous-and-next-buttons).
16
16
17
-
## Recommended: Previous and next buttons
17
+
## Recommended: "Previous" and "Next" buttons
18
18
19
19
Using previous and next buttons for pagination means that users can easily navigate through results, but don't have the ability to jump to an arbitrary results page.
20
20
21
-
![Placeholder image for prev/next interface]()
22
-
23
21
Though this approach offers less precision than a full-blown page selector, it does not require knowing the precise number of search results. This makes it a good fit for Meilisearch's current capabilities.
24
22
25
23
### Implementation
@@ -52,7 +50,7 @@ Likewise, if you set `limit` to `20` and `offset` to `40`, you skip the first 40
Use this formula to quickly calculate a page's offset value: `offset = limit * (target page number - 1)`.
53
+
You can use this formula to calculate a page's offset value: `offset = limit * (target page number - 1)`. In the previous example, the calculation would look like this: `offset = 20 * (3 - 1)`. This gives us `40` as the result: `offset = 20 * 2 = 40`.
56
54
57
55
Once a query returns fewer `hits` than your configured `limit`, you have reached the last results page.
58
56
@@ -135,13 +133,11 @@ document.querySelector('#next_button').onclick = function () { updatePageNumber(
135
133
136
134
This type of pagination consists of a numbered list of pages accompanied by next and previous buttons.
This is a common UI pattern that offers users a significant amount of precision when navigating results. However, due to Meilisearch's [limitations](#choosing-the-right-pagination-ui), it is not a good fit for pagination with Meilisearch.
141
137
142
138
### Implementation
143
139
144
-
The general implementation of a page selection interface is similar to our [recommended solution](#recommended-previous-and-next-buttons), but also includes a numbered page list.
140
+
The general implementation of a page selection interface is similar to our [recommended solution](#recommended-previous-and-next-buttons), with one signficant addition: it includes a numbered page list.
145
141
146
142
To create a numbered page list, however, you must know the exact number of total results. For example, if you have 100 results and your search result pages contain 10 results each, your selector must show a list of numbers going from 1 to 10.
147
143
@@ -218,10 +214,10 @@ By default, Meilisearch returns a maximum of 1000 search results. Consult our [i
218
214
219
215
Though we advise against it, you can use `estimatedTotalHits` to calculate the number of search result pages. This means your number of results and page count are likely to change until Meilisearch retrieves the last search result.
220
216
221
-
For example, a query's `estimatedTotalHits` might be `100` when you fetch the first page of search results. If you are showing 20 results per page, this means your interface will display a page selector with 5 pages. When you fetch the fifth and last page according to Meilisearch's current estimate, however, `estimatedTotalHits` might change to `300`. Your page list, previously displaying 5 pages, must now show 10 total pages.
217
+
For example, a query's `estimatedTotalHits` might be `100` when you fetch the first page of search results. If you are showing 20 results per page, this means your interface will display a page selector with 5 pages. When you fetch the fifth and last page according to Meilisearch's current estimate, however, `estimatedTotalHits` might change to `300`. Your page list, previously displaying 5 pages, must now show 15 total pages.
222
218
223
219
This method gives users access to all search results. However, it also results in an interface that might feel unreliable due to constant and unpredictable changes.
224
220
225
221
## Unsatisfied? Let us know
226
222
227
-
Is the current state of pagination in Meilisearch negatively impacting you? Please share your thoughts with us in this [GitHub discussion](https://github.com/meilisearch/product/discussions/483). We are actively working on improving this aspect of Meilisearch, and your input is greatly appreciated.
223
+
Is the current state of pagination in Meilisearch creating problems for you? Please share your thoughts with us in this [GitHub discussion](https://github.com/meilisearch/product/discussions/483). We are actively working on improving this aspect of Meilisearch and your input is greatly appreciated.
0 commit comments