Filament•16mo ago

Pagination urls above the table or scroll up after change page

Hello, After I click at the next page on pagination, and the page is loaded it is not scrolling up to the first result of the table. Is it possible to achieve this? Also is it possible to have the paginated links at the top of the table, and not only at the bottom? Thank you!

Solution:

Add this to a service provider or extract the js to your own script if you’re using a custom js file in filament. ```php Filament::registerRenderHook( 'scripts.end',...

Jump to solution

14 Replies

Patrick Boivin•16mo ago

I don't think pagination at the top is possible out of the box unfortunately

Solution

awcodes•16mo ago

Add this to a service provider or extract the js to your own script if you’re using a custom js file in filament.

Filament::registerRenderHook(
                'scripts.end',
                fn (): string => new HtmlString('<script>document.addEventListener("click", function(e) {if (e?.target?.closest("button,a")?.classList.contains("filament-tables-pagination-item")){window.scrollTo({top: 0, behavior: "smooth"});}});</script>'),
            );

Filament::registerRenderHook(
                'scripts.end',
                fn (): string => new HtmlString('<script>document.addEventListener("click", function(e) {if (e?.target?.closest("button,a")?.classList.contains("filament-tables-pagination-item")){window.scrollTo({top: 0, behavior: "smooth"});}});</script>'),
            );

Patrick Boivin•16mo ago

I like that this is self-contained

awcodes•16mo ago

And it’s not a lot of js so I’m comfortable doing it inline.

Patrick Boivin•16mo ago

I have a minor alternative

awcodes•16mo ago

Share it. 🙂

Patrick Boivin•16mo ago

1 sec, I'll piggy back on your answer 😂

class ListPosts extends ListRecords
{
    // ...

    public function setPage($page, $pageName = 'page')
    {
        parent::setPage($page, $pageName);

        $this->dispatchBrowserEvent('scroll-to-top');
    }
}

class ListPosts extends ListRecords
{
    // ...

    public function setPage($page, $pageName = 'page')
    {
        parent::setPage($page, $pageName);

        $this->dispatchBrowserEvent('scroll-to-top');
    }
}

Filament::registerRenderHook(
    'scripts.end',
    fn (): string => new HtmlString('
        <script>document.addEventListener("scroll-to-top", () => window.scrollTo(0, 0))</script>
    '),
);

Filament::registerRenderHook(
    'scripts.end',
    fn (): string => new HtmlString('
        <script>document.addEventListener("scroll-to-top", () => window.scrollTo(0, 0))</script>
    '),
);

I agree that small inline scripts like this are totally fine, beats having a tiny external .js file

JimKarvoOP•16mo ago

But I have the default filament setup! The same problem exists also @ demo of filament. If I display 25 orders per page and move to the next page, it doesn't scroll up https://demo.filamentphp.com/shop/orders?page=2

awcodes•16mo ago

Then demo doesn’t use it. That’s why you have to add it. Scrolling on pagination clicks is not built in to filament or even livewire for that matter. You can add it to any service provider. This is good too, less global, but would work if you only wanted it on specific list pages.

JimKarvoOP•16mo ago

Thank you both. One last question. Where to find the service provider? I mean, I have to put the Filament::registerRenderHook ..., Where?

awcodes•16mo ago

app/Providers. It’s standard laravel. https://laravel.com/docs/10.x/providers#main-content

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

JimKarvoOP•16mo ago

Thank you very much! My mind thought it was a filament part, and I searched at documentation with no results!!

awcodes•16mo ago

Yea. Filament is still just laravel so anything you can do in laravel you can do in filament. I will usually make a FilamentServiceProvider though and do filament related stuff in there. With v3 it won’t be needed with the Panels package though.

JimKarvoOP•16mo ago

Thank you both @awcodes @pboivin it worked 🙏

Gaming

Programming

Pagination urls above the table or scroll up after change page