PrimeFaces dataTable pagination and javascript

Question

我正在使用PrimeFaces 6.1，我正在处理这样的表

<p:dataTable 
    id="listingsTable"
    value="#{listingsController.listingsLazyDataModel}" 
    var="actualAd" 
    paginator="true"
    rows="20"
    lazy="true"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
    rowsPerPageTemplate="10,20,30"
    paginatorPosition="bottom"
    widgetVar="listingsTableDesktop">
    <p:ajax event="page" listener="#{listingsController.pageChanged}" oncomplete="pageChangedOnDetails(PF('listingsTableDesktop'))" />
</p:dataTable>

和javascript是以下

function pageChangedOnDetails(listingsTableDesktop) {
    console.log("paginaDestinazione1="+listingsTableDesktop.paginator.getCurrentPage());
    console.log("paginaDestinazione2="+listingsTableDesktop.paginator.currentReport[0].innerText);
}

问题在于，PageChangedDeTails函数中的所有两行代码始终返回页面事件之前用户的页面。

似乎是在更新DOM之前调用的" oncomplete"。

是预期的行为吗？我做错了吗？

Answer 1

是的，您的 oncomplete函数在数据表Paginator oncomplete函数之前被调用。所有客户端回调都是如此（完整，成功，错误）。

您可以查看PrimeFaces core.ajax.js源代码：

complete: function(xhr, status) {
        // this is your callback
        if(cfg.oncomplete) {
             cfg.oncomplete.call(this, xhr, status, xhr.pfArgs);
        }
        // this is the extension callback (datatable)
        if(cfg.ext && cfg.ext.oncomplete) {
             cfg.ext.oncomplete.call(this, xhr, status, xhr.pfArgs);
        }

（第572行） - 这是6.1源代码，而不是当前主代码。

您可能有可能抓住呼叫者并尝试自己调用ext.oncomplete或完全扩展该完整的功能，但最终可能会得到一个混乱的解决方案。

相反，我建议使用Ajax侦听器方法（pageChanged）获取当前页面并使用RequestContext，如果您需要更新任何组件或执行任何JavaScript代码。

https://www.primefaces.org/showcase/ui/misc/requestcontext.xhtml

编辑：使用请求上下文您可以从pageChanged侦听器获取新页面，然后将此新页面发送到JavaScript函数（processNewPage）：

public void onPageChanged(PageEvent pageEvent) {
    int newPage = pageEvent.getPage();
    RequestContext requestContext = RequestContext.getCurrentInstance();
    requestContext.execute("processNewPage(" + newPage + ")");
}

也值得注意的是，自6.0.10以来，数据表组件在跨页面维护其状态：https://www.primefaces.org/showcase/ui/data/datatable/tablestate.xhtml