Pagination for List
's.
Custom.Paginated (List a)
The PaginatedList
type wraps your list
and holds all of the information necessary to track pagination. It does not modify your list in any way (unless you call Paginate.map
).
fromList : Basics.Int -> List a -> PaginatedList a
Create a new paginated list. Pass it the desired number of items per page and the list of items to be paginated. The current page is always initialized to 1. The minimum number of items per page is 1. The minimum number of total pages is 1 (even if you pass in an empty list).
fromList 10 myItems
|> currentPage
-- equals 1
map : (List a -> List a) -> PaginatedList a -> PaginatedList a
Transform the list inside the PaginatedList
by providing a function to apply to the wrapped list. This is how you map, filter, sort and update items in the paginated list. If this function changes the length of the list, the pagination calculations will be updated accordingly. If the newly calculated number of pages is less than the current page, the current page will be set to the new last page.
filtered =
Paginate.map (List.filter isFavorited) myPaginatedList
-- the paginated list now only contains the items matching your filter
-- also the number of pages will update to stay in sync
sorted =
Paginate.map List.sort myPaginatedList
filteredAndSorted =
Paginate.map (List.filter isFavorited >> List.sort) myPaginatedList
updated =
Paginate.map (\items -> updateById id newData items) myPaginatedList
changeItemsPerPage : Basics.Int -> PaginatedList a -> PaginatedList a
Change the paging size. The total number of pages will be updated accordingly, and the current page will remain unchanged if possible. If the newly calculated number of pages is less than the current page, the current page will be set to the new last page. The minimum paging size is 1 item per page.
goTo : Basics.Int -> PaginatedList a -> PaginatedList a
Set the current page directly. If the specified page is "out of bounds" of the paginated list, it will be set to the first or last page accordingly.
next : PaginatedList a -> PaginatedList a
Go to the next page. Has no effect if you are already on the last page.
prev : PaginatedList a -> PaginatedList a
Go to the previous page. Has no effect if you are already on the first page.
first : PaginatedList a -> PaginatedList a
Go to the first page.
last : PaginatedList a -> PaginatedList a
Go to the last page.
page : PaginatedList a -> List a
Get the "slice" of the wrapped list for the current page. Usually you would call this and pass the result on to your view function.
List.range 1 100 |> fromList 10 |> goTo 3 |> page
-- equals [ 21, 22, 23, 24, 25, 26, 27, 28, 29 30 ]
view = page myPaginatedList |> renderCurrentPageItems
allItems : PaginatedList a -> List a
Pull out the wrapped list (losing the pagination context). Equivalent to foldMap identity
.
foldMap : (List a -> b) -> PaginatedList a -> b
Remove the pagination context and run a function on the wrapped list. Useful for many needs such as:
hasUnread =
foldMap (List.any isUnread) myPaginatedList
numberOfFavorites =
foldMap (List.filter isFavorite >> List.length) myPaginatedList
stickyItems =
foldMap (List.filter isFavorite) myPaginatedList
Functions to help build a "pager" and useful paging data
pager : (Basics.Int -> Basics.Bool -> b) -> PaginatedList a -> List b
Build a "pager" for your paginated list. Usually you would use this to render the pager view. The supplied function is given the current page number being iterated over and whether that page is the current page.
fromList 2 [ 1, 2, 3, 4, 5, 6 ]
|> next
|> pager (\pageNum, isCurrentPage -> ( pageNum, isCurrentPage ))
-- equals [ ( 1, False ), ( 2, True ), ( 3, False ) ]
pagerView =
div [ class "mypager" ] <|
pager (\pageNum isCurrentPage -> renderPagerButton pageNum isCurrentPage) myPaginatedList
Custom.PagerOptions a
PagerOptions
is used by the elidedPager
function to configure window sizes and output format. See elidedPager
for examples of its use. The available options are as follows:
innerWindow
The number of page numbers to display on either side of the current page number. A negative number will be treated as 0
.
outerWindow
The number of page numbers to display at the beginning and end of the page numbers. 0
means that the first and last pages will not be displayed. A negative number will be treated as 0
.
pageNumberView
How to display the page numbers provided by the pager.
gapView
How to represent the gaps between page windows (if there are any).
elidedPager : PagerOptions b -> PaginatedList a -> List b
Builds an "elided" pager, which displays a "gap" placeholder in-between the first and last page(s) and the current page, if there are enough pages to justify doing so. This is useful for large collections where the number of pages might be huge and you don't want to display all of the page numbers at once.
renderPageNumberString pageNum isCurrentPage =
if isCurrentPage then
">" ++ String.fromInt pageNum ++ "<"
else
String.fromInt pageNum
pagerOptions =
{ innerWindow = 1
, outerWindow = 1
, pageNumberView = renderPageNumberString
, gapView = "..."
}
paginatedList = fromList 2 (List.range 20) |> goTo 5
elidedPager pagerOptions paginatedList
--> [ "1", "...", "4", ">5<", "6", "...", "10" ]
elidedPager { pagerOptions | outerWindow = 0 } paginatedList
--> [ "4", ">5<", "6" ]
length : PaginatedList a -> Basics.Int
Get the length of the wrapped list. Equivalent to foldMap List.length
.
currentPage : PaginatedList a -> Basics.Int
Get the current page of the PaginatedList
.
itemsPerPage : PaginatedList a -> Basics.Int
Get the number of items per page.
totalPages : PaginatedList a -> Basics.Int
Get the total number of pages.
isFirst : PaginatedList a -> Basics.Bool
Useful to conditionally show a "prev" button.
isLast : PaginatedList a -> Basics.Bool
Useful to conditionally show a "next" button.