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?

spauny · Answer 1 · 2017-09-21T10:37:04.403

0

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

edited Sep 21 '17 at 10:37

answered Sep 17 '17 at 16:57

spauny

4,976
9
44
61

If that is the case it is a bug imo... onComplete shou;d be called after all dom updates... – Kukeltje Sep 17 '17 at 17:24
Thank you. For me is not clear in this case how to combine the pageChanged listener, the remoteCommand and the execution of a javascript code. Can you kindly provide an example? – Gavi Sep 17 '17 at 18:47
@Gavi Can you tell me exactly what you want to achieve after you get the correct current page? – spauny Sep 18 '17 at 08:39
@Kukeltje not sure if it's a bug since that's the expected behaviour but it's definitely confusing. I've opened up a discussion with Primefaces' developers to consider changing this: https://forum.primefaces.org/viewtopic.php?f=3&t=52538 – spauny Sep 18 '17 at 12:41
After I get the current page, I can create dinamically an url to push inside the history. With this approach, if the user go back with the browser the application will load the correct page inside the dataTable – Gavi Sep 18 '17 at 18:50
@Gavi I updated my answer with some examples. Sorry it took so long, I was buried at work – spauny Sep 21 '17 at 10:37
Do you actually mean expected since it is designed/implemented that way or that it is specified that way in the JSF ajax specs? See https://stackoverflow.com/questions/20146630/execution-order-of-events-when-pressing-primefaces-pcommandbutton for at least the `p:commandButton` – Kukeltje Sep 21 '17 at 10:40
I only know saw your PF forum topic. Good discussion. Oleg suggested to create a PF github issue. I second that. Can/will you take care of that? Cheers – Kukeltje Sep 21 '17 at 10:44

PrimeFaces dataTable pagination and javascript

1 Answers1