How to prevent pagination from interfering with other paginated component s on same page?

What seems to be the problem:
Pagination of one component is setting the page for all other components with pagination.

Steps to Reproduce:

  1. Place multiple paginated Livewire components on the same page.
  2. Click a page number greater than 1 in one of the components.
  3. Refresh the page.
  4. Observe that all components now try to display on page x, even if they don’t have enough data.

If it’s happening when you refresh the page, then I’m assuming that both of your components are accessing the same query string. Are you using something like protected $updatesQueryString = ['page']; on both components? If so, when you hit yourapp.app/route?page=2, both components are loading the page variable.

If not, you will need to post code, because that’s the only way I know of to keep state when you refresh the page out of the box without manually using cache/sessions/cookies.

Thanks for the reply @xxdalexx. That’s exactly what’s happening. The crux is that I have multiple instances of the same component on the same page, so changing the $updatesQueryString property wouldn’t fix it.

It looks like functionality is hardcoded to use the page querystring in the WithPagination trait.

Any suggestions?

Ok, that’s new. I didn’t realize the functionality changed to automatically do that, it wasn’t in any of the release notes.

Until there’s a fix, or a way to disable it, we can override that functionality and disable it by adding this to your component:

Import: use Illuminate\Pagination\Paginator;

public function getUpdatesQueryString()
{
    return;
}

public function initializeWithPagination()
{
    Paginator::currentPageResolver(function () {
        return $this->page;
    });

    Paginator::defaultView($this->paginationView());
}
1 Like

Thanks … this is an acceptable work-around to where a page refresh will reset pagination.