Quick Guide To Migrate TYPO3 Fluid to Native PaginatorInterface/SimplePagination

Als guter TYPO3-Entwickler sollten Sie immer das Release-Log der neuen TYPO3-Version lesen.

Einer der Schmerzpunkte der jüngsten Abschaffung und Entfernung des berühmten <f:widget.paginate /> Lesen Sie mehr unter
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>

Ich hoffe, dass dieses Tutorial nützlich ist, um TYPO3 fluid <f:widget.paginate /> auf das neue TYPO3 PaginatorInterface zu migrieren. Wir sehen uns bis zum nächsten TYPO3 Tutorial.

Post a Comment

×
Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren
  • user
    Mateng September 6, 2023 um 4: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

Got answer to the question you were looking for?