Pagination¶
events2
uses the SimplePagination
from TYPO3 Core to navigate through
your records with first
, previous
, next
and last
buttons. If
you need something more complex like 1, 2 ... 56, 57, 58 ... 123, 124
you
should use another pagination library or build your own one. In the next steps
I explain you how to implement the numbered_pagination solution
of Georg Ringers.
Install
numbered_pagination
Install and activate
numbered_pagination
extension from Georg Ringer. Please check in your SitePackage extension thatnumbered_pagination
is set as a dependency and will be loaded beforeevents2
and your SitePackage.Change pagination class in TypoScript
plugin.tx_events2.settings.pageBrowser.class = GeorgRinger\NumberedPagination\NumberedPagination
Change path to events2 partials
Set constant
partialRootPath
to a location within your SitePackage:plugin.tx_events2.view.partialRootPath = EXT:site_package/Resources/Private/Extensions/Events2/Partials/
Create Pagination template
Create file
Resources/Private/Extensions/Events2/Partials/Component/Pagination.html
with example content from numbered_pagination https://github.com/georgringer/numbered_pagination/blob/master/Resources/Private/Partials/Pagination.html<html lang="en" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"> <ul class="f3-widget-paginator"> <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}"> <li class="previous"> <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'pagination.previous')}"> {f:translate(key:'widget.pagination.previous', extensionName: 'fluid')} </a> </li> </f:if> <f:if condition="{pagination.hasLessPages}"> <li>…</li> </f:if> <f:for each="{pagination.allPageNumbers}" as="page"> <li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'current')}"> <a href="{f:uri.action(action:actionName, arguments:{currentPage: page})}">{page}</a> </li> </f:for> <f:if condition="{pagination.hasMorePages}"> <li>…</li> </f:if> <f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}"> <li class="next"> <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'pagination.next')}"> {f:translate(key:'widget.pagination.next', extensionName: 'fluid')} </a> </li> </f:if> </ul> </html>
Clear Cache
Needed to reload the fluid templates.