PrimeFaces dataTable pagination and javascript

Question

I'm using PrimeFaces 6.1 and I'm dealing with a table like this

<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>

and the javascript is the following

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

The problem is that all the two lines of code inside the pageChangedOnDetails function return always the page on which the user was before the page event.

Seems to be the "onComplete" is called before the dom is updated.

Is it the expected behaviour? Am I doing something wrong?

Answer 1

Yes, your oncomplete function is called before the datatable paginator oncomplete function. This is true for all client callbacks (complete, success, error).

You can have a look at primefaces core.ajax.js source code:

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 (line 572) - this is the 6.1 source code, not the current master.

You could potentially grab the caller and try to call ext.oncomplete yourself or extend that complete function altogether but you might end up with a messy resolve.

Instead I recommend using the ajax listener method ( pageChanged ) to get the current page and use RequestContext if you need to update any components or execute any javascript code.

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

EDIT: With request context you can get the new page from the pageChanged listener and then send this new page to a javascript function ( processNewPage ):

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

It's also worth noting that since 6.0.10, the datatable component maintains its state across pages: https://www.primefaces.org/showcase/ui/data/datatable/tableState.xhtml