README

提供完整功能的TYPO3扩展，用于实现传递对象的AJAX分页。

功能

• 仅渲染相关内容元素，不会引起性能问题
• 轻量级，无需任何额外的库即可工作
• 有选项使用附加选项操作浏览器历史记录
• 即使禁用JavaScript，分页也能正常工作
• 在分页过程成功或失败后调用回调

使用方法

1. 您可以使用以下命令使用composer安装扩展：composer require skeuper/ajax-pagination
   或者，您可以从TYPO3扩展存储库下载扩展，并使用扩展管理模块安装它。
2. 将模板 AJAX Pagination (ajax_pagination) 包含到静态模板中。
3. 现在，在包含ViewHelper命名空间 xmlns:p="http://typo3.org/ns/SKeuper/AjaxPagination/ViewHelpers" 后，将 <f:widget.paginate ... > ... </f:widget.paginate> 更改为 <p:widget.paginate ... > ... </p:widget.paginate>，一切应该就可以正常工作了。

TYPO3 9 TypoScript 渲染

目前，依赖于的TYPO3扩展 helhum/typoscript-rendering 中的Widget ViewHelper与TYPO3 9 不兼容。
在我的情况下，我使用此补丁来使ViewHelper与TYPO3兼容。
官方扩展存储库中也有两个拉取请求来修复此问题，如果您想等待官方补丁。

浏览器历史记录操作

分页添加了在分页时操作浏览器历史记录的选项。
您只需将 updateBrowserHistory: '1' 添加到分页的传递配置中即可。
这将导致分页在浏览器历史记录中推入状态，以便在返回时恢复以前的网站。

自定义分页模板

您可以通过在自定义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
            }
        }
    }
}

分页成功后的回调

如果您需要在分页后执行JavaScript（例如，对于图像库库），您可以使用默认公开的xhrPagination对象注册回调。

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

xhrPagination对象的接口，您也可以使用TypeScript模块导入

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
}

开发

想要贡献力量？太棒了！
我总是很高兴听到有关错误或拉取请求的消息。

许可

该项目许可协议为GPL v2.0 - 请参阅LICENSE文件以获取详细信息