Disable LiveView pagination

[m1dnight]

We are using Flop for all our pagination needs, and only a few pages use LiveView components.

It seems to be impossible to force Flop pagination to not use LV at this point when the page contains some LV components.

Is there any way to do this?

Currently I manually built the navigation form using Flop.Phoenix.CursorPagination.pagination_path.

[woylie]

At the moment, Flop Phoenix will always produce pagination links with patch attributes. In a LiveView, you'll need to use handle_params, but in a static view, those attributes should normally be ignored, and since the href attribute is always set, you should see a normal page load. There is no way to prevent the LiveView patch attributes from being added. We can think about allowing that with an additional attribute, but can you give me some context why you want that?

[m1dnight]

Coming back to this, since I never replied to it apparently.

The context is that we have 2 phoenix apps that have some live view added after the facts using live_render. This makes it impossible to use the handle_params/3, since that only works if the entire page is a liveview page.

The pagination therefore doesnt work, as I cannot provide a handle_params function.

[woylie]

I see. Can you use handle_event in your setup? If so, you can omit the path parameter and set on_paginate (or on_sort in the table) instead:

<.pagination
 meta={@meta}
 on_paginate={JS.push("paginate")}
/>

[m1dnight]

That didnt seem to work, or at least, the handle_event is not called from the live component.

I fixed this for the time being by removing the liveview component and replacing it with a regular form.

If I can help with this in any way, give me a shout.

[woylie]

Did you set the target attribute?

<.pagination
 meta={@meta}
 on_paginate={JS.push("paginate")}
 target={@myself}
/>

[m1dnight]

A user reported a bug where pagination failed again, so I remembered this thread. I found some working code that temporarily fixes the issue with pages that contain a bit of live view.

Usually, I'd write the following:

 <Flop.Phoenix.pagination meta={@meta} path={~p"/admin/invoicing/client-invoicing/#{@type}"} />

But I changed it to this workaround, but that no longer seems to work:

    <nav class="pagination" role="navigation" aria-label="pagination">
      <%= if @meta.has_previous_page? do %>
        <a
          href={
            Flop.Phoenix.CursorPagination.pagination_path(
              :previous,
              ~p"/admin/invoicing/client-invoicing/#{@type}",
              @meta
            )
          }
          aria-label="Go to previous page"
          class="page-link"
        >
          &lt;&lt;
        </a>
      <% else %>
        <span aria-label="Go to previous page" class="page-link disabled">
          &lt;&lt;
        </span>
      <% end %>

      <%= if @meta.has_next_page? do %>
        <a
          href={
            Flop.Phoenix.CursorPagination.pagination_path(
              :next,
              ~p"/admin/invoicing/client-invoicing/#{@type}",
              @meta
            )
          }
          aria-label="Go to next page"
          class="page-link"
        >
          &gt;&gt;
        </a>
      <% else %>
        <span aria-label="Go to next page" class="page-link disabled">
          &gt;&gt;
        </span>
      <% end %>
    </nav>

[m1dnight]

Finally got something working here:

  <div class="flex justify-center my-4" phx-update="ignore" id="client-invoicing-nav">
    <%= if @meta.has_previous_page? do %>
      <a
        href={
          Flop.Phoenix.Pagination.build_page_link_helper(
            @meta,
            ~p"/admin/invoicing/client-invoicing/#{@type}"
          ).(@meta.previous_page)
        }
        aria-label="Go to previous page"
        class="page-link"
      >
        &lt;&lt;
      </a>
    <% else %>
      <span aria-label="Go to previous page" class="page-link disabled">
        &lt;&lt;
      </span>
    <% end %>

    <%= if @meta.has_next_page? do %>
      <a
        href={
          Flop.Phoenix.Pagination.build_page_link_helper(
            @meta,
            ~p"/admin/invoicing/client-invoicing/#{@type}"
          ).(@meta.next_page)
        }
        aria-label="Go to next page"
        class="page-link"
      >
        &gt;&gt;
      </a>
    <% else %>
      <span aria-label="Go to next page" class="page-link disabled">
        &gt;&gt;
      </span>
    <% end %>
  </div>