Quick Guide To Migrate TYPO3 Fluid <f:widget.paginate /> to Native PaginatorInterface/SimplePagination

Kategorie : Extensions , General , Extensions , General , By : Sanjay Chauhan

As a good TYPO3 developer, You should keep always read new version TYPO3 release log.

One of the pain point of recent deprecation and removal of the famous <f:widget.paginate /> Read more at

Step 1. Add SimplePagination at YourController.php


use TYPO3\CMS\Core\Pagination\ArrayPaginator;
use TYPO3\CMS\Core\Pagination\SimplePagination;

// ...

* @param int $currentPage
public function itemsListAction(int $currentPage = 1)
    $itemIds = explode(',', $this->settings['items'] ?? '');
    $items = $this->itemService->getItemsByIds($itemIds);
    $arrayPaginator = new ArrayPaginator($items, $currentPage, 8);
    $paging = new SimplePagination($arrayPaginator);
            'items' => $items,
            'paginator' => $arrayPaginator,
            'paging' => $paging,
            'pages' => range(1, $paging->getLastPageNumber()),


Step 2. Create Fluid YourTemplate.html


<!-- Render your items listing -->
<f:for as="items" each="{paginator.paginatedItems}" iteration="iterator">
    <!-- write your fluid code -->

<!-- Render your paging -->
<f:render partial="Paging.html" arguments="{paging: paging, pages: pages, paginator: paginator}" />


Step 3. Create Fluid Partial Paging.html


<ul class="paging paging-block">
  <f:if condition="{paging.previousPageNumber} && {paging.previousPageNumber} >= {paging.firstPageNumber}">
      <li class="waves-effect">
        <a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'paging.first')}">
          <i class="material-icons">first_page</i>
      <li class="waves-effect">
        <a href="{f:uri.action(action:actionName, arguments:{currentPage: paging.previousPageNumber})}" title="{f:translate(key:'paging.previous')}">
          <i class="material-icons">chevron_left</i>
      <li class="disabled"><a href="#"><i class="material-icons">first_page</i></a></li>
      <li class="disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>
  <f:for each="{pages}" as="page">
    <li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'active', else:'waves-effect')}">
      <a href="{f:uri.action(action:actionName, arguments:{currentPage: page})}">{page}</a>

  <f:if condition="{paging.nextPageNumber} && {paging.nextPageNumber} <= {paging.lastPageNumber}">
      <li class="waves-effect">
        <a href="{f:uri.action(action:actionName, arguments:{currentPage: paging.nextPageNumber})}" title="{f:translate(key:'paging.next')}">
          <i class="material-icons">chevron_right</i>
      <li class="waves-effect">
        <a href="{f:uri.action(action:actionName, arguments:{currentPage: paging.lastPageNumber})}" title="{f:translate(key:'paging.last')}">
          <i class="material-icons">last_page</i>
      <li class="disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>
      <li class="disabled"><a href="#"><i class="material-icons">last_page</i></a></li>

I hope this tutorial would serve useful to migrate TYPO3 fluid <f:widget.paginate /> to new TYPO3 PaginatorInterface. See you untill next TYPO3 Tutorial.

To keep improving, Do you have feedback and suggestions? Or, Are you facing any issues to implement above TYPO3 tutorial? Feel free to write your comment at below comment box; I'll happy to help you :)

Post Comment

Your email address will not be published. Required fields are marked *


Name ist erforderlich!

Geben Sie einen gültigen Namen ein

Gültige E-Mail ist erforderlich!

Gib eine gültige E-Mail Adresse ein

Kommentar ist erforderlich!

Google Captcha ist erforderlich!

Sei der erste der kommentiert

Stay up to date with our recent TYPO3 Blogs, news, & updates