.. ==================================================
.. 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

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

    <!-- after -->
    <div class="news-list-view" id="news-container-{contentObjectData.uid}">
        ...
    </div>

.. code-block:: html

    <!-- 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

.. 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.