Fork me on GitHub

Pagination components


Pagination components display paginated content and the corresponding pagination links.

The pagination component is a UI component, which means it will be attached to a DOM node. It has another UI component for displaying pagination links, and the attr()->pagination() method allows to define in templates where they will be displayed.

<div class="row">
    <!-- Pagination content component -->
    <div class="col-md-12" <?php
        echo attr()->bind(rq(PageComponent::class)) ?>>
    </div>
    <!-- Pagination links component -->
    <div class="col-md-12" <?php
        echo attr()->pagination(rq(PageComponent::class)) ?>>
    </div>
</div>

Note: The content of the links component is displayed only if the number of pages is greater than 1.

Displaying pagination

Pagination components inherit from the Jaxon\App\PageComponent class, which, like UI components, requires them to implement a public function html(): string|Stringable function.

The new currentPage() method returns the current page number.

    public function html():  string
    {
        return '<div>Showing page number ' . $this->currentPage() . '</div>';
    }

The Jaxon\App\PageComponent class also requires the implementation of the protected function limit(): int and protected function count(): int methods, which must respectively return the maximum number of items per page, and the number of items to paginate.

Finally, the function that displays paginated content can be implemented.

    public function showPage(int $pageNumber)
    {
        // Get the paginator. This will also set the final page number value.
        $paginator = $this->paginator($pageNumber);
        // Render the page content.
        $this->render();
        // Render the pagination component.
        $paginator->render($this->rq()->showPage());
    }

Using a data bag

The Jaxon\App\PageDatabagTrait trait can be used to store pagination settings in a data bag. This allows, for example, when a user leaves and returns to the page, to reposition him on the last page number visited.

The Jaxon\App\PageDatabagTrait trait requires the implementation of the protected function bagName(): string and protected function bagAttr(): string methods, which must return the name of the data bag and the key that will store the page number, respectively.

/**
 * @databag content
 */
class PageContent extends \Jaxon\App\PageComponent
{
    use PageDatabagTrait;

   /**
    * @inheritDoc
    */
   protected function bagName(): string
   {
       return 'content';
   }

   /**
    * @inheritDoc
    */
   protected function bagAttr(): string
   {
       return 'page.number';
   }

   /**
    * @inheritDoc
    */
    protected function limit(): int
    {
        return 10;
    }

    /**
     * @inheritDoc
     */
    protected function count(): int
    {
        return 150;
    }

   public function html():  string
    {
        return '<div>Showing page number ' . $this->currentPage() . '</div>';
    }

    public function showPage(int $pageNumber)
    {
        // Get the paginator. This will also set the final page number value.
        $paginator = $this->paginator($pageNumber);
        // Render the page content.
        $this->render();
        // Render the pagination component.
        $paginator->render($this->rq()->showPage(pm()->page()));
    }
}