Extension providing functionality for AJAX pagination for passed content objects

Installs: 3 065

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 2

Forks: 0

Open Issues: 4


1.0.7 2020-01-28 11:39 UTC



TYPO3 Extension providing full functionality for AJAX paginations for passed objects.


  • only the related content element is rendered resulting in no performance problems
  • lightweight, it doesn't require any additional libraries to work
  • option to manipulate the browser history with an additional option
  • if JavaScript is disabled the pagination will still work normally
  • callbacks after successfully or failing the pagination process


  1. You can install the extension either using composer using composer require skeuper/ajax-pagination
    or you can download the extension from the TYPO3 extension repository and install it with the extension manager module.
  2. Include the template AJAX Pagination (ajax_pagination) to the included static templates.
  3. Now you can change <f:widget.paginate ... > ... </f:widget.paginate> to <p:widget.paginate ... > ... </p:widget.paginate> after including the ViewHelper namespace xmlns:p="" and everything should work already.

TYPO3 9 TypoScript Rendering

Currently the Widget ViewHelpers in the relied on TYPO3 extension helhum/typoscript-rendering are not compatible with TYPO3 9.
In my case I'm using this patch to make the ViewHelpers TYPO3 compatible.
There are 2 Pull Requests in the official extension repository too to fix the issue in case you want to wait for an official patch.

Browser History Manipulation

The pagination adds the option to manipulate the browser history while paginating.
You can simply add updateBrowserHistory: '1' to the passed configuration of the pagination.
This will result in the pagination pushing states in the browser history for restoring the previous site on going back.

Custom Pagination Template

You can overwrite the default pagination template by simply adding following lines to your custom TypoScript:

config {
    // you can also use tx_extension to only change the template for a specific extension
    tx_extbase {
        view {
            widget.SKeuper\AjaxPagination\ViewHelpers\Widget\PaginateViewHelper.templateRootPaths {
                0 = EXT:ajax_pagination/Resources/Private/Templates
                1 = EXT:provider_tpl/Resources/Private/Templates/AjaxPagination

Callbacks after a successful pagination

In case you have to execute JavaScript after a pagination (f.e. for image gallery libraries) you can register a callback using the default exposed xhrPagination object.

xhrPagination.callbacks.push(function () {
    console.log("successfully paginated woohoo")

The interface for the xhrPagination object which you could also import using the TypeScript modules:

interface XhrPagination {
    // callbacks in case the pagination fails, returns text containing the error message/status
    failCallbacks: { (errorText: string): any; } [];
    // callbacks after successful pagination but before scrolling to the top of the element
    // useful f.e. if galleries aren't initialized yet and you want to initialize them before scrolling to them
    callbacksPreScroll: { (): any; } [];
    // callbacks being called after everything finished
    callbacks: { (): any; } [];

     * add the pagination click event listener to all elements of queryable element
     * @param element: QuerySelectorElement
    addAllPaginationEventListeners(element: QuerySelectorElement): void;

     * adds the onpopstate functionality
     * and replaces the current browser history state for history.back() functionality to main page
    prepareBrowserHistoryUpdate(): void;

// the element simply requires the querySelectorAll function
interface QuerySelectorElement {
    querySelectorAll(selectors: string): any


Want to contribute? Great!
I'm always glad hearing about bugs or pull requests.


This project is licensed under the GPL v2.0 - see the LICENSE file for details