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

Question

我在使用ajax的分页小部件时遇到了一个问题。我正在做的是，我选择类别然后点击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之后，如果我使用分页，则视图会中断。没有样式或标题或任何东西。

当我点击paginate小部件上的下一个时，它就会显示出来：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值。然后，窗口小部件创建标准链接，使您的点击正常 - 并且它们将是指向XHR响应的“内部内容”的链接，因为URL包含类型编号。

这就是它变坏的地方：添加后你无法删除这个typeNum。因此，您将不得不导致单击的下一个/上一个等链接，以导致加载内容的新XHR请求（您如何这样做取决于您的JS应用程序，因此无法指导您）。

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

但为了解决这个问题，我实际上建议你不要使用分页小部件。主要原因是你已经在XHR上下文中，它允许你接收控制器动作的参数，并在你的控制器动作中操纵查询的offset和limit部分。这意味着您可以生成链接而不是窗口小部件，而是生成控制器操作，例如，将CSS类放在应该触发XHR请求的链接上，而不是应该重新加载整个页面的链接上（例如显示详细视图） 。您可以避免重写分页模板，并控制所有链接的所有参数。

实际上，无论是否使用XHR，我都会使用分页小部件来支持offset的控制器参数。有很多技术原因可以解释为什么我不会在这里列出，但足以说明，为了创建一个参数而交易大量的“黑匣子”是一个非常合理且可预测的结果。