.. ================================================== .. FOR YOUR INFORMATION .. -------------------------------------------------- .. -*- coding: utf-8 -*- with BOM. .. include:: ../../../Includes.txt 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: .. code-block:: typoscript 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`: .. code-block:: html
...
...
.. code-block:: html .... .... 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 .. code-block:: typoscript 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.