Paginate with Symfony UX

[Asmitta-01]

I want to paginate my products so that they will act as if it was working with Ajax. I just discovered Symfony UX and i want to know if there's a package for that please. If yes which one ?
Also, i never used Symfony UX in my projects, can it causes conflicts ? Is there additional configurations to do if i want to use it ?

[tito10047]

Hi,
If you means Ux Live component, than you can use any pagination library.
I have succesfult working Knp Pagination bundle working with live component.

//YourComponent
use Knp\Component\Pager\Pagination\PaginationInterface;

trait IBoxLiveTable
{
    private int $page = 1;

    public function paginator(): PaginationInterface
    {
        $qb = $this->createPaginationQueryBuilder();

        if ($this->orderBy) {
            $qb->orderBy($this->orderBy, $this->orderDirection);
        }

        return $this->pager = $this->paginator->paginate(
            $qb,
            $this->page,
            $this->perPage
            , [
                "size" => 'small',
            ]
        );
    }

    public function getRows(): iterable
    {
        return $this->paginator()->getItems();
    }

    #[LiveAction]
    public function paginate(#[LiveArg] int $page): void
    {
        $this->page = $page;
    }
}

{#YourComponent#}
<div{{ attributes.defaults({class:"ibox"}) }}>
            {% for item in paginator %}
            {% endfor %}
            {{ knp_pagination_render(pagination, 'Global/_partials/pagination.html.twig') }}
</div>

Now you need modify template for pagination. copy original tempalate and add live action button instead of a links

{#Global/_partials/pagination.html.twig#}
{% if pageCount > 1 %}
    <nav>
        {% set classAlign = (align is not defined) ? '' : align == 'center' ? ' justify-content-center' : (align == 'right' ? ' justify-content-end' : '') %}
        {% set classSize = (size is not defined) ? '' : size == 'large' ? ' pagination-lg' : (size == 'small' ? ' pagination-sm' : '') %}
        <ul class="pagination{{ classAlign }}{{ classSize }} m-0">

            {% if previous is defined %}
                <li class="page-item">
                    <button class="page-link text-nowrap" rel="prev" {{ live_action('paginate', {'page': previous }) }}>
                        &laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</button>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link text-nowrap">&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</span>
                </li>
            {% endif %}
...

[Asmitta-01]

Thanks

I can't test it since I've already found a solution: https://www.reddit.com/r/symfony/s/7NvWwBMuTG