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.

If you want to clean up your component code:

Were you originally looking for the ability to have different query strings for each instance of the component?

Yes, but I believe the pagination functionality was hard-coded to only look for the “page” query string, regardless of component instance. I haven’t been able to update to 1.0 yet to check if that is customizable now.

I took the original livewire pagination and added more functionality to change ‘page’ to whatever you want, or disable it without having to override the methods in your component. That’s what I linked above.

I haven’t fully tested for your case, but I’m about 95% sure this will work. Let’s say you have your component in the page 3 times.

Declare all 3 query string tied variables in your component, set one as the default and then pass in your mount method which one to use. (Also in the link above, I said to set the $paginationQueryString as protected, but you will want it public.)

public $fooPage;
public $barPage;
public $bazPage;
public $paginationQueryString = 'fooPage';

public function mount($queryString = null)
{
    if ($queryString) {
        $this->paginationQueryString = $queryString;
        $this->initializeWithPaginationExtended(); //Reinitialize the pagination with the new query string.
    }
}

Then your 3 components:

@livewire('component') //will use the default fooPage.
@livewire('component', 'barPage')
@livewire('component', 'bazPage')