Paging

A list for a server that returns one page of data and a total count. For the case where all the data is in the browser, see Ten thousand rows.

Pager total: Store total perPage: Screen size page: page send: #goPage:

The pager holds no data

The pager is given the total count and the current page number. When a button is pressed, it sends a page number to the screen. The screen fetches the data.

Screen >> goPage: n = self with: { page: n. rows: Store page: n size: Screen size }.

In this example, the data comes from a class that stands in for the server and holds 143 rows. In a real system this is an Http get:. The screen is written the same way in either case.

#goPage: is a handler on the screen, checked at compile time. The pager decides which page number to send, and each button carries a different value.

Display

The pager shows the first page, the last page, and two pages on either side of the current one, with one … for each gap. The width does not change with the number of pages, so the buttons do not move when paging.

"Previous" is disabled on the first page and "Next" on the last. The disabled attribute is written only when needed.

Zero rows is treated as one page, displayed as "0 件".

State

The pager is not an actor and holds no state. The current page number and the total count are held by the screen and passed to the pager on each render. The screen needs both to fetch data, so holding them in the pager as well would duplicate them.