ajaxperformancejsfprimefacesprimefaces-datatable

How to decrease request payload of p:ajax during e.g. p:dataTable pagination


I am using JSF 2.2 with Primefaces 5.1. There is an editable primefaces datatable with pagination enabled.

            <p:dataTable editMode="row" 
                         editable="true" 
                         value="#{usersBean.users}" 
                         var="user" paginator="true" rows="20">

                <p:ajax event="rowEditInit" onstart="handleRowEditInit(event,this);"/>

                <p:column>
                    <p:rowEditor/>
                </p:column>
                <p:column headerText="Real name">
                    <p:cellEditor rendered="true">
                        <f:facet name="input">
                            <p:inputText value="#{user.realName}"/>
      </f:facet>
                            <f:facet name="output">
                                <h:outputText value="#{user.realName}"/>
                            </f:facet>
</p:cellEditor>
                </p:column>
                <p:column headerText="User name">
                    <p:cellEditor>
                        <f:facet name="input">
                            <p:inputText value="#{user.userName}"/>
                        </f:facet>
                        <f:facet name="output">
                            <h:outputText value="#{user.userName}"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
            </p:dataTable>

Every time the page is changed the datatable does an AJAX POST with all the data of the current page. As you can partly see in the image below.

enter image description here

For big tables with much data this results in huge requests. This is not neccessary right? Is there a way to change this behavior?


Solution

  • Indeed, when you submit a form in HTML, by default every single HTML input element will be sent as request parameter. PrimeFaces ajax components therefore offer the partialSubmit="true" attribute which will then send only the HTML input elements covered by the process attribute, which defaults in <p:ajax> to @this and in <p:commandXxx> to @form.

    So, just add this to the data table in case to optimize pagination performance:

    <p:ajax event="page" partialSubmit="true" />
    

    And add this to any command button which only needs to access the current row in the data table (e.g. to show it in a dialog) to optimize action processing performance:

    <p:commandButton ... process="@this" partialSubmit="true" />
    

    You can also configure it globally via below context param in web.xml:

    <context-param>
        <param-name>primefaces.SUBMIT</param-name>
        <param-value>partial</param-value>
    </context-param>
    

    And then for cases where you actually need a full submit, explicitly use partialSubmit="false".