georgringer / numbered-pagination
Improved pagination for TYPO3
Fund package maintenance!
georgringer
paypal.me/GeorgRinger/10
www.amazon.de/hz/wishlist/ls/8F573K08TSDG
Patreon
Installs: 727 824
Dependents: 17
Suggesters: 5
Security: 0
Stars: 28
Watchers: 4
Forks: 13
Open Issues: 4
Type:typo3-cms-extension
Requires
- php: >=7.3
- typo3/cms-core: ^9 || ^10 || ^11 || ^12 || ^13
Replaces
- typo3-ter/numbered-pagination: 2.1.0
README
Since TYPO3 10 a new pagination API is shipped which supersedes the pagination widget controller which is removed in version 11.0. Official documentation
This extension provides an improved pagination which can be used to paginate array items or query results from Extbase. The main advantage is that it reduces the amount of pages shown.
Example: Imagine 1000 records and 20 items per page which would lead to 50 links.
Using the NumberedPagination
, you will get something like < 1 2 ... 21 22 23 24 ... 100 >
Installation
Install the extension with composer require georgringer/numbered-pagination
or by downloading it
from extensions.typo3.org or the Extension Manager.
Usage
Just replace the usage of SimplePagination
with \GeorgRinger\NumberedPagination\NumberedPagination
and you are done.
Set the 2nd argument to the maximum number of links which should be rendered.
$itemsPerPage = 10; $maximumLinks = 15; $currentPage = $this->request->hasArgument('currentPage') ? (int)$this->request->getArgument('currentPage') : 1; $paginator = new \TYPO3\CMS\Extbase\Pagination\QueryResultPaginator($allItems, $currentPage, $itemsPerPage); $pagination = new \GeorgRinger\NumberedPagination\NumberedPagination($paginator, $maximumLinks); $this->view->assign('pagination', [ 'paginator' => $paginator, 'pagination' => $pagination, ]);
Templating
<f:for each="{pagination.paginator.paginatedItems}" as="item" iteration="iterator"> <f:render partial="Item" arguments="{item:item}" /> </f:for> <f:render partial="Pagination" arguments="{pagination: pagination.pagination, paginator: pagination.paginator, actionName: 'listXYZ'}" />
Copy the pagination partial EXT:numbered_pagination/Resources/Private/Partials/Pagination.html
to your extension or use it directly by providing the path mapping:
# Example for extension "fo"
plugin.tx_fo.view.partialRootPaths.4483 = EXT:numbered_pagination/Resources/Private/Partials/
The default paginator looks like this:
- [1] 2 3 … next
- 1 [2] 3 … next
- prev … 2 [3] 4 … next
- prev … 3 [4] 5
- prev … 3 4 [5]
Here's three how-to's on how to achieve different, still common paginators:
Scenario 1
By uncommenting li.first
and li.last
and commenting out li.prev
and li.next
it looks like this:
- [1] 2 3 … last
- 1 [2] 3 … last
- first 2 [3] 4 last
- first … 3 [4] 5
- first … 3 4 [5]
Scenario 1 (alternative)
By additionally changing their text to 1
and {pagination.lastPageNumber}
it looks like this:
- [1] 2 3 … 5
- 1 [2] 3 … 5
- 1 2 [3] 4 5
- 1 … 3 [4] 5
- 1 … 3 4 [5]
Scenario 3
By uncommenting li.first
and li.last
(and renaming them to |<
and >|
) and flipping their position with li.prev
and li.next
(and renaming them to <
and >
) it looks like this:
- [1] 2 3 … > >|
- 1 [2] 3 … > >|
- |< < … 2 [3] 4 … > >|
- |< < … 3 [4] 5
- |< < … 3 4 [5]
Remark on 'dots'
In case the two properties {pagination.hasLessPages}
and {pagination.hasMorePages}
don't exactly suit the scenario you're trying to set up, think about doing your own calculations. Here's an example:
<!-- instead of {pagination.hasLessPages} which is 'displayRangeStart > 1' internally --> <f:if condition="{pagination.displayRangeStart} > 2"> <li>…</li> </f:if> <!-- instead of {pagination.hasMorePages} which is 'displayRangeEnd < lastPageNumber' internally --> <f:if condition="{pagination.displayRangeEnd + 1} < {pagination.lastPageNumber}"> <li>…</li> </f:if>