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

[mikebronner]

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.

[xxdalexx]

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.

[mikebronner]

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?

[xxdalexx]

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());
}

[mikebronner]

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

[xxdalexx]

If you want to clean up your component code:

Custom Paginator - Disable or Rename Page QueryString

Here is a trait you can stick in your project somewhere to use instead of the default WithPagination if you need the added functionality. <?php namespace App\Traits\Livewire; use Illuminate\Pagination\Paginator; trait WithPaginationExtended { public $page = 1; public function isQueryStringEnabled() { if (property_exists($this, 'paginationQueryStringEnabled')) { return $this->paginationQueryStringEnabled; } return true; } public functi…

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

[mikebronner]

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.

[xxdalexx]

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')