PrimeFaces dataTable分頁和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);
}

問題是pageChangedOnDetails函數內的所有兩行代碼總是返回用戶在頁面事件之前所在的頁面。

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

這是預期的行為嗎？ 難道我做錯了什么？

Answer 1

是的，您的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源代碼，而不是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開始，datatable組件在頁面之間保持其狀態： https : //www.primefaces.org/showcase/ui/data/datatable/tableState.xhtml