PrimeFaces dataTable分页和javascript

时间:2017-09-17 13:39:54

标签: jsf primefaces jsf-2

我正在使用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);
}

问题是pageChangedOnDetails函数中的所有两行代码总是返回用户在页面事件之前所在的页面。

似乎是在更新dom之前调用“onComplete”。

这是预期的行为吗? 我做错了吗?

1 个答案:

答案 0 :(得分:0)

是的,在数据​​表分页器oncomplete函数之前调用了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);
        }

https://github.com/primefaces/primefaces/blob/6c1b2bf1e7a3db568ba2b4ea21b211fc605c052b/src/main/resources/META-INF/resources/primefaces/core/core.ajax.js (第572行) - 这是6.1源代码,而不是当前的主代码。

您可能会抓住调用者并尝试自己调用ext.oncomplete或完全扩展该完整功能,但最终可能会遇到麻烦的问题。

相反,如果您需要更新任何组件或执行任何javascript代码,我建议使用ajax侦听器方法(pageChanged)来获取当前页面并使用RequestContext。

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