README

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

Features

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

Usage

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.
Include the template AJAX Pagination (ajax_pagination) to the included static templates.
Now you can change <f:widget.paginate ... > ... </f:widget.paginate> to <p:widget.paginate ... > ... </p:widget.paginate> after including the ViewHelper namespace xmlns:p="http://typo3.org/ns/SKeuper/AjaxPagination/ViewHelpers" 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
}

Development

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

License

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

skeuper / ajax-pagination

Maintainers

Details