Skip to main content

Pagination

Pagination is commonly used by applications to consume large amount of data by dividing it into small pages. Modern applications leverage one of the following commonly used UX patterns:

  • Traditional pagination using page numbers - Users can visit next or previous page of results or jump an arbitraty page by choosing page numbers. The main benefit to a user is a visibility into number of pages and ability to jump to an arbitrary page number.

Pages Page numbers

  • Infinite scrolling - When a website returns only a part of the results. But as the users scroll down to the end of the page, additional results are loaded and rendered for the users. This allows users to browse as many results they want without having to click anything, which is friendlier to mobile device users.

Infinite scrolling

Paginating through search results​

In this section we'll see the constructs provided by our SDK that assist developers in building out pagination into their apps. Considering the search example let's work through the search index:

client, err := tigris.NewClient(ctx, &tigris.Config{Project: "test"})

if err != nil {
		panic(err)
}

defer func() { _ = client.Close() }()

s := client.GetSearch()
catalog := search.GetIndex[Catalog](s)

Using page numbers​

To retrieve a page of results, you can simply use Search method with page number and page size. Following query fetches the first page of results with page size set as 5

it, err := catalog.Search(ctx, &search.Request{
	Q:       "*",
	Options: &search.Options{PageSize: 5, Page: 1},
})
if err != nil {
	panic(err)
}

var res search.Result[model.Catalog]
for it.Next(&res) {
	for _, v := range res.Hits {
		fmt.Printf("%+v\n", v.Document)
	}
}

if it.Err() != nil {
	panic(it.Err())
}
Details
Output
&{Brand:AllSaints Id:72b8f1f4-9e91-43d9-8b8f-c26d7413990f Labels: Name:leather jacket Popularity:0 Price:200 Review:{Author:jane Rating:9.7}}
&{Brand:Puma Id:5af290ce-8c22-4460-9e33-9a9a869df8b9 Labels: Name:sneakers Popularity:0 Price:80 Review:{Author:joe Rating:8.5}}
&{Brand:Kate Spade Id:34e601bf-0c7b-4bea-8ab4-e4c4c7f44d54 Labels: Name:satchel bag Popularity:0 Price:120 Review:{Author:mary Rating:9.8}}
&{Brand:Levi's Id:2a2d47f2-099a-4391-90f8-d52c8a06a9a9 Labels: Name:denim jeans Popularity:0 Price:55 Review:{Author:joe Rating:7.5}}
&{Brand:Clarks Id:1df0a235-ecda-416f-b19a-7e89c1dcd2c8 Labels: Name:leather shoes Popularity:0 Price:110 Review:{Author:jane Rating:9.5}}

The PageSize parameter controls the number of documents to include in a result page. The returned array of documents is accessible under Hits key along with some search metadata.

Additionally, search result contains Meta object having current page and total pages along with other information.

var res search.Result[model.Catalog]
for it.Next(&res) {
	fmt.Printf("%+v\n", res.Meta)
}
Details
Output
{Found:12 TotalPages:3 Page:{Current:1 Size:5}}

Infinite scrolling​

Infinite scrolling also loads data in pages, it is just that the UX is more fluid. Instead of using page number, an Iterator object can be obtained from Search() method call and processed iteratively.

it, err := catalog.Search(ctx, &search.Request{
	Q:       "*",
	Options: &search.Options{PageSize: 5},
})
if err != nil {
	panic(err)
}

var res search.Result[model.Catalog]
for it.Next(&res) {
	for _, v := range res.Hits {
		fmt.Printf("%+v\n", v.Document)
	}
	fmt.Printf("%+v\n\n", res.Meta)
}

if it.Err() != nil {
	panic(it.Err())
}
Details
Output
&{Brand:AllSaints Id:72b8f1f4-9e91-43d9-8b8f-c26d7413990f Labels: Name:leather jacket Popularity:0 Price:200 Review:{Author:jane Rating:9.7}}
&{Brand:Puma Id:5af290ce-8c22-4460-9e33-9a9a869df8b9 Labels: Name:sneakers Popularity:0 Price:80 Review:{Author:joe Rating:8.5}}
&{Brand:Kate Spade Id:34e601bf-0c7b-4bea-8ab4-e4c4c7f44d54 Labels: Name:satchel bag Popularity:0 Price:120 Review:{Author:mary Rating:9.8}}
&{Brand:Levi's Id:2a2d47f2-099a-4391-90f8-d52c8a06a9a9 Labels: Name:denim jeans Popularity:0 Price:55 Review:{Author:joe Rating:7.5}}
&{Brand:Clarks Id:1df0a235-ecda-416f-b19a-7e89c1dcd2c8 Labels: Name:leather shoes Popularity:0 Price:110 Review:{Author:jane Rating:9.5}}
{Found:12 TotalPages:3 Page:{Current:1 Size:5}}

&{Brand:Fossil Id:01a83c14-3d67-438c-b3cf-2b75a09c34d6 Labels: Name:leather wallet Popularity:0 Price:65 Review:{Author:john Rating:8.5}}
&{Brand:adidas Id:a3e3c779-31cb-4d60-87cb-c4edc64ab4b7 Labels: Name:running shorts Popularity:0 Price:35 Review:{Author:olivia Rating:7.5}}
&{Brand:nike Id:1aeb7c50-201d-42e8-8b77-23f3a3b86a89 Labels: Name:running shoes Popularity:0 Price:89 Review:{Author:olivia Rating:8.5}}
&{Brand:adidas Id:24034d4c-4de4-4ee7-8492-0d0f27b8d46b Labels: Name:sneakers shoes Popularity:0 Price:40 Review:{Author:olivia Rating:9}}
&{Brand:coach Id:4b4f7e06-025a-4b70-853f-0be7a38d221d Labels: Name:sling bag Popularity:0 Price:75 Review:{Author:alice Rating:9.2}}

{Found:12 TotalPages:3 Page:{Current:2 Size:5}}
&{Brand:coach Id:c7ec6a25-6a7a-4d9b-bced-6b40f6d097c6 Labels: Name:tote bag Popularity:0 Price:49 Review:{Author:olivia Rating:8.3}}
&{Brand:michael kors Id:2f7301f2-69b2-4b67-a3e3-9d9e7cda5948 Labels: Name:fiona handbag Popularity:0 Price:99.9 Review:{Author:alice Rating:7}}
{Found:12 TotalPages:3 Page:{Current:3 Size:5}}

As you can see, the iterator returns the same search.Result object as in previous section with pagination metadata.