Quick Guide To Migrate TYPO3 Fluid to Native PaginatorInterface/SimplePagination

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
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/10.2/Feature-89603-IntroduceNativePaginationForLists.html

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);
    $this->view->assignMultiple(
        [
            '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 -->
</f:for>

<!-- 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}">
    <f:then>
      <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>
        </a>
      </li>
      <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>
        </a>
      </li>
    </f:then>
    <f:else>
      <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:else>
  </f:if>
  <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>
    </li>
  </f:for>

  <f:if condition="{paging.nextPageNumber} && {paging.nextPageNumber} <= {paging.lastPageNumber}">
    <f:then>
      <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>
        </a>
      </li>
      <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>
        </a>
      </li>
    </f:then>
    <f:else>
      <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>
    </f:else>
  </f:if>
</ul>

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

Post a Comment

×
  • user
    Mateng September 1, 2023 At 3:57 pm
    Thanks. I was migrating a sliding window pagination from TYPO3 9 to 11. I used Georg Ringers extension "Improved Pagination" which offers the NumberedPagination class. You can it instead of SimplePagination and then use the preconfigured Fluid partial within the extension.

    Chek it out here:
    https://github.com/georgringer/numbered_pagination
  • user
    Alberto Iturria February 3, 2023 At 11:34 am
    Great tutorial.. 🙂

    Thank you!

Got answer to the question you were looking for?