TYPO3: Migrate Fluid pagination widget to paginator API

TYPO3 v10 deprecated and TYPO3 v11 removed all Fluid widget code. The most used widget was likely the pagination widget. Since TYPO3 10.2, a native pagination API has been integrated into the core — here’s how to migrate.

Goal

• Use the core Paginator API instead of the Fluid widget
• Render pagination in your Fluid templates using the new API

1) Create a Paginator in your Controller

Use ArrayPaginator (lists/arrays) or a domain‑specific paginator for queries. Example with ArrayPaginator:

use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
use TYPO3\CMS\Core\Pagination\ArrayPaginator;
use TYPO3\CMS\Core\Pagination\SimplePagination;

final class BlogController extends ActionController
{
    public function listAction(int $currentPage = 1): void
    {
        $items = $this->postRepository->findAll()->toArray();

        $perPage = 10;
        $paginator = new ArrayPaginator($items, max(1, $currentPage), $perPage);
        $pagination = new SimplePagination($paginator);

        $this->view->assignMultiple([
            'paginator' => $paginator,
            'pagination' => $pagination,
            'currentPage' => $paginator->getCurrentPageNumber(),
            'numberOfPages' => $pagination->getLastPageNumber(),
        ]);
    }
}

Notes:

• ArrayPaginator accepts an array of items, the current page, and items per page.
• For database queries, paginate the query result appropriately (e.g. via repositories) or use a paginator that supports your data source.

2) Add routes for page parameter (optional)

If you use a GET parameter like ?page=2, make sure your action signature accepts it (int $currentPage = 1). For speaking URLs, integrate page into your routing setup.

3) Render items and pagination in Fluid

<f:for each="{paginator.paginatedItems}" as="post">
  <!-- render your item here -->
  <article>
    <h2>{post.title}</h2>
  </article>
</f:for>

<nav class="pagination" aria-label="Pagination">
  <f:if condition="{currentPage} > 1">
    <a href="?page={currentPage - 1}" rel="prev">Previous</a>
  </f:if>

  <span>Page {currentPage} of {numberOfPages}</span>

  <f:if condition="{currentPage} < {numberOfPages}">
    <a href="?page={currentPage + 1}" rel="next">Next</a>
  </f:if>
</nav>

Use your project’s URL building (e.g., f:link.action, custom ViewHelpers, or TYPO3 routing) instead of raw query strings as needed.

4) Tips

• Keep items per page configurable (settings, TS config, or site config).
• For complex data sources, consider implementing your own paginator class.
• Combine with RouteEnhancers to get clean pagination URLs.

With the core Paginator API you remove Fluid widget usage and gain a clean, forward‑compatible pagination setup.