If you’re working on an Elixir project that requires pagination, you might want to consider using Scrivener.HTML. This powerful helper is designed to work seamlessly with your Scrivener page struct, enabling easy HTML output tailored for various CSS frameworks. Let’s break down the steps on how to set it up!

Setup

To get started, you need to configure your Elixir project by following these simple steps:

• Add :scrivener_html to your dependencies in the mix.exs file:

defp deps do
    [
      # ...
      {:scrivener_html, "~> 1.8"}
      # ...
    ]
  end

• Include :scrivener_html in the applications list:

defp application do
    [
      # ...
      applications: [ ..., :scrivener_html, ... ]
      # ...
    ]
  end

• Configure your routes_helper module in config/config.exs:

config :scrivener_html,
    routes_helper: MyApp.Router.Helpers,
    view_style: :bootstrap

Example Usage

To use Scrivener.HTML in your templates, follow these steps:

<%= for user <- @page do %>
  
<% end %>
<%= pagination_links @page %>

Here, @page refers to a Scrivener.Page struct returned from your repository pagination.

Controller Function

The controller function using pagination will look something like this:

def index(conn, params) do
  page = MyApp.User
  # Add additional query conditions as needed
  page = MyApp.Repo.paginate(params)
  render conn, "index.html", page: page
end

Advanced Pagination with Scopes and URL Parameters

Should there be any URL parameters involved, include them as the third parameter:

<%= pagination_links @conn, @page, [locale], path: pages_path %>

This will generate links that include the locale in the URL, for example, en/page?page=1.

Customizing Pagination Links

If you need to customize the output or add specific HTML components, Scrivener.HTML allows for that flexibility:

• To prevent HTML escaping, use: Phoenix.HTML.raw.
• To show icons instead of text, you can use:

<%= pagination_links @conn, @page, previous: ~E(i class="material-icons">chevron_leftchevron_right

• For first and last links, the same logic applies, enabling more customized user interfaces.

View Styles

Scrivener.HTML supports multiple CSS frameworks by providing various view styles, such as:

• :bootstrap – Bootstrap 3.x styling
• :bootstrap_v4 – Bootstrap 4.x styling
• :foundation – Foundation for Sites 6.x
• :semantic – Semantic UI 2.x
• :materialize – Materialize CSS 0.x
• :bulma – Bulma 0.4.x

Troubleshooting

If you encounter issues while implementing Scrivener.HTML, here are a few troubleshooting tips:

• Ensure the dependency is correctly added in the mix.exs file.
• Revisit your routes_helper configuration to make sure it’s pointing to the right module.
• Check for any syntax errors in your templates or controller functions.
• Make sure you are using the appropriate view style for your design needs.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

By following the above steps, integrating Scrivener.HTML for pagination in your Elixir project is a breeze. Just like a skilled chef layers flavors to create the perfect dish, you can structure your data effectively for a seamless user experience.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.