在 Typo3 中使用 ajax 加载时，Paginate Widget 会破坏布局

Question

我在 ajax 中使用分页小部件时遇到问题。我正在做的是，我 select 类别然后点击 ajax 请求以通过在模板中加载数据并返回 html 来获取相应的列表，如下所示：

<f:if condition="{articles}">
<f:then>
    <f:widget.paginate objects="{articles}" as="paginatedArticles" configuration="{itemsPerPage: numberOfRecords}">
        <f:for each="{paginatedArticles}" as="article">
            <h2>
                <f:link.action action="show" arguments="{article : article}"> {article.title}</f:link.action>
            </h2>
            <p>
                <f:format.html>{article.description}</f:format.html>
            </p>
            <hr/>
        </f:for>
    </f:widget.paginate>
</f:then>
<f:else>
    No Records Found
</f:else>

在我的 ajaxMethod 控制器中，我只是在做

$this->view->assign('articles', $result); 所以它会用我的结果加载模板。

但现在渲染 ajax 后，如果我使用分页，视图就会中断。没有样式或 header 或任何东西。

这是我在分页小部件上单击下一个时的显示方式：http://prntscr.com/kr8vg0

为了完整起见，这里是我写的 setup.txt，它调用了 ajax。

// PAGE object for Ajax call:
tt_content.list.20 = CASE
tt_content.list.20 {
    key.field = list_type
}

ajax = PAGE
ajax {
    typeNum = 1272
    config {
        disableAllHeaderCode = 1
        disablePrefixComment = 1
        additionalHeaders {
            1526302502.header = Content-Type: text/html;charset=utf-8
        }
    }

10 = CONTENT
10 {
    table = tt_content
    select {
          pidInList = this
          orderBy = sorting
          where = (list_type IN ("articleext_list"))
    }
    renderObj = < tt_content.list.20
    }
}

如有任何帮助，我们将不胜感激。

Answer 1

驱动（应该驱动）来自小部件的 XHR 请求的 typeNum 是从 Fluid 扩展中添加的，不需要您添加特殊的 PAGE 对象。

即使您以某种方式进行了调用特定控制器操作的覆盖，也可能无法正确处理。通常您永远不会引用内容元素实例，而是引用直接的 Extbase 请求引导。除其他外，因为呈现内容对象会添加包装器。

所以您应该删除它并确保将 QueryResult 传递给分页小部件。然后在必要时覆盖小部件模板。其余部分无需配置 TS 即可工作。

编辑：

分页小部件本身在通过 XHR 呈现的模板中使用意味着它会传输您用于加载 XHR 的参数 - 包括自定义 typeNum 值。该小部件然后创建标准 links，您的点击就像正常一样 - 它们将是您 XHR 响应的 "inner content" 的 link，因为 URL 包含类型编号。

这里是问题所在：添加此 typeNum 后无法将其删除。因此，您将不得不改为导致 next/prev 等 link 被单击，以导致加载内容的新 XHR 请求（您如何做到这一点在很大程度上取决于您的 JS 应用程序，所以可以'我不会带你去那里）。

我关于确保 QueryResult 的评论是不相关的，除非您的页面没有改变，例如您总是看到项目 1-10。

但为了解决这个问题，我实际上建议您不要使用分页小部件。主要原因是您已经处于 XHR 上下文中，该上下文允许您接收控制器操作的参数并从控制器操作中操作查询的 offset 和 limit 部分。这意味着您可以生成 links 而不是小部件，而是控制器操作，例如将 CSS class 放在应该触发 XHR 请求的 links 上与那些应该重新加载整个页面的页面（例如显示详细视图）。您不必覆盖分页模板，并且可以控制所有 links.

的所有参数

事实上，无论是否使用 XHR，我都赞成使用分页小部件为上面的 offset 设置控制器参数。有一长串技术原因为什么我不会在这里列出但足以说明，交易大量 "black box" 必须创建一个参数是一个非常合理且可预测结果的事情。

在 Typo3 中使用 ajax 加载时，Paginate Widget 会破坏布局

Paginate Widget breaks layout when loaded using ajax in Typo3

ajax

typo3

fluid

typo3-7.6.x

typo3-extensions