View Source LightningWeb.Pagination (Lightning v2.10.4)

Pagination Components

This has been extracted and adapted from scrivener_html. See: https://github.com/mgwidmann/scrivener_html

Summary

Functions

Attributes

  • async_page (Phoenix.LiveView.AsyncResult) - Defaults to nil.
  • page (:map) (required)
  • url (:any) (required)
  • help_text (:string) - Defaults to nil.

Slots

  • action

Returns the raw data in order to generate the proper HTML for pagination links. Data is returned in a {text, page_number} format where text is intended to be the text of the link and page_number is the page it should go to. Defaults are already supplied and they are as follows

Functions

Attributes

  • async_page (Phoenix.LiveView.AsyncResult) - Defaults to nil.
  • page (:map) (required)
  • url (:any) (required)
  • help_text (:string) - Defaults to nil.

Slots

  • action
Link to this function

raw_pagination_links(paginator, options \\ [])

View Source

Returns the raw data in order to generate the proper HTML for pagination links. Data is returned in a {text, page_number} format where text is intended to be the text of the link and page_number is the page it should go to. Defaults are already supplied and they are as follows:

[distance: 5, next: :next, previous: :previous, first: true, last: true, ellipsis: :ellipsis]

distance must be a positive non-zero integer or an exception is raised. next and previous should be strings but can be anything you want as long as it is truthy, falsey values will remove them from the output. first and last are only booleans, and they just include/remove their respective link from output. An example of the data returned:

iex> Scrivener.HTML.raw_pagination_links(%{total_pages: 10, page_number: 5})
[{"<<", 4}, {1, 1}, {2, 2}, {3, 3}, {4, 4}, {5, 5}, {6, 6}, {7, 7}, {8, 8}, {9, 9}, {10, 10}, {">>", 6}]
iex> Scrivener.HTML.raw_pagination_links(%{total_pages: 20, page_number: 10}, first: ["←"], last: ["→"])
[{"<<", 9}, {["←"], 1}, {:ellipsis, {:safe, "&hellip;"}}, {5, 5}, {6, 6},{7, 7}, {8, 8}, {9, 9}, {10, 10}, {11, 11}, {12, 12}, {13, 13}, {14, 14},{15, 15}, {:ellipsis, {:safe, "&hellip;"}}, {["→"], 20}, {">>", 11}]

Simply loop and pattern match over each item and transform it to your custom HTML.