Quick Guide To Migrate TYPO3 Fluid <f:widget.paginate /> 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.