jschomay/elm-paginate/2.0.0

NOTE: this package is not compatible with Elm 0.19.1

Paginate

Encapsulate your pagination concerns from the rest of your app.

The PaginatedList type

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).

Constructing and modifying

fromList : 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 : 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.

Changing pages

goTo : 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.

first : PaginatedList a -> PaginatedList a

Go to the first page.

last : PaginatedList a -> PaginatedList a

Go to the last page.

Accessors

length : PaginatedList a -> Int

Get the length of the wrapped list.

currentPage : PaginatedList a -> Int

Get the current page of the PaginatedList.

itemsPerPage : PaginatedList a -> Int

Get the number of items per page.

totalPages : PaginatedList a -> Int

Get the total number of pages.

isFirst : PaginatedList a -> Bool

Useful to conditionally show a "prev" button.

isLast : PaginatedList a -> Bool

Useful to conditionally show a "next" button.

toList : PaginatedList a -> List a

Pull out the wrapped list (losing the pagination context). Consider using query instead.

query : (List a -> b) -> PaginatedList a -> b

Run an arbitrary function on the wrapped list (losing the pagination context). Probably most useful for querying the list. Or if you want to pull certain items out of pagination to making them "sticky."

hasUnread = query (List.any isUnread) myPaginatedList




numberOfFavorites = query (List.filter isFavorite >> List.length) myPaginatedList




nonPaginatedFavorites = query (List.filter isFavorite) myPaginatedList

Rendering

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
pager : (Int -> 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 (,)
-- equals [ (1, False), (2, True), (3, False) ]




pagerView =
    div [ class "mypager" ] <|
        pager (\pageNum isCurrentPage -> renderPagerButton pageNum isCurrentPage) myPaginatedList