AJAX based pagination

To improve the usability it is possible to change the pagination to use AJAX instead of full page reloads.

Requirements

  • Installation of the extension typoscript_rendering. Thanks to Helmut Hummel (https://helhum.io/)!

  • The list plugin must be inserted as content element and not by TypoScript.

  • The changes written below

Required template changes

The template must be adopted. You can take either the example provided by the extension itself or adopt your template.

Pagination template

Adopt the template of the pagination widget:

plugin.tx_news.settings.list {
    paginate.templatePath = typo3conf/ext/news/Resources/Private/Templates/Styles/Twb/Templates/ViewHelpers/Widget/Paginate/IndexAjax.html
}

Basically, every link of the pagination is enhanced by 2 data attributes which contain the uid of the plugin and the ajax link which is generated by the extension typoscript_rendering.

List template

The default templates of the extension are already prepared. If you have modified the templates already, check the following 2 changes in List.html:

<!-- before -->
<div class="news-list-view">
    ...
</div>

<!-- after -->
<div class="news-list-view" id="news-container-{contentObjectData.uid}">
    ...
</div>
<!-- before -->
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}">
    ....
</n:widget.paginate>

<!-- after -->
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit,recordId:contentObjectData.uid}">
    ....
</n:widget.paginate>

Changes with JavaScript

The extension provides a simple example as well which can be used directly or can be included in the custom frontend workflow.

After loading jQuery (which is not required by the extension), you need to include the following file: typo3conf/ext/news/Resources/Public/JavaScript/AjaxPagination.js. This can be either done by using

page.includeJS {
    # This is just an example
    # file1 = fileadmin/jquery.js
    file2 = typo3conf/ext/news/Resources/Public/JavaScript/AjaxPagination.js
}

or by copying its content to wherever you need it.