Search code examples
symfonypaginationtwigknppaginator

Is there a way to make the knp paginator show only show next and previous buttons


How it renders it

1 2 3 > >> (page numbers, next button, last page button)

How I need it to render

> (only next button)

How the render method is triggered on the twig file

<div class="pagination">
   {{ knp_pagination_render(pagination) }}
</div>

maybe this will help, this is the render function inside of the knp paginator source code

    /**
     * Renders the pagination template
     *
     * @param string $template
     * @param array $queryParams
     * @param array $viewParams
     *
     * @return string
     */
    public function render($pagination, $template = null, array $queryParams = array(), array $viewParams = array())
    {
        return $this->environment->render(
            $template ?: $pagination->getTemplate(),
            $this->processor->render($pagination, $queryParams, $viewParams)
        );
    }

   /**
   * Get name
   *
   * @return string
   */
   public function getName()
   {
      return 'knp_pagination';
   }

Since the website will have thousands(probably millions) of pictures, I need to get rid of the page numbers and only show the "next" button once the user has reached the end of the infinite scroll


Solution

  • One way to do that is override twig file. Find file sliding.html.twig and copy it into app/Resources/KnpPaginatorBundle/views/Pagination and remove everything you don't need.

    If you want only next and previous buttons then solution is:

    {# default Sliding pagination control implementation #}
    
    {% if pageCount > 1 %}
    <div class="pagination">
        {% if previous is defined %}
            <span class="previous">
                <a href="{{ path(route, query|merge({(pageParameterName): previous})) }}">&lt;</a>
            </span>
        {% endif %}
    
        {% if next is defined %}
            <span class="next">
                <a href="{{ path(route, query|merge({(pageParameterName): next})) }}">&gt;</a>
            </span>
        {% endif %}
    </div>
    

    And of course clear cache.