Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
JavascriptBehaviour
The Javascript behaviour can be used to catch events with javascript without making an AJAX request. In the example, the "page" event is caught with pe:javascript. This will also destroy the paging functionality of p:datatable because no ajax request will be done. So it should not be used for every event and every component. Following javascript parameters will be available in executes statement:
  • source - client Id of the component which fires the event
  • event - The name of the catched event
  • params - The rendered params (f:param childrens of pe:javascript)
  • ext - The object created by corresponding widget
The 'ext' parameter can be used for example to get the parameters which are created by the parent widget. For example the colResize event of p:dataTable:

  var ext = {
   params: [
    { name: id + '_columnId', value : columnHeader.attr('id') },
    { name: id + '_width', value : newWidth },
    { name: id + '_height', value : columnHeader.height() }
  ]
  };

id is the client Id of the datatable.

Notice: We can not provided a list with params, for this you should look at the PrimeFaces or PrimeFaces Extensions source.
Messages
SubjectMessage
subject 0text 0
subject 1text 1
subject 2text 2
subject 3text 3
subject 4text 4
subject 5text 5
subject 6text 6
subject 7text 7
subject 8text 8
subject 9text 9
Source

<p:dataTable id="myDataTable" var="message" value="#{dataTableController.messages}" paginator="true"
    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    rows="10" rowsPerPageTemplate="5,10,15">
    
    <pe:javascript event="page" execute="alert('Datatable page event called')"/>
    
    <f:facet name="header">
        Messages
    </f:facet>
    <p:column>
        <f:facet name="header">
            <h:outputText value="Subject" />
        </f:facet>
        <h:outputText value="#{message.subject}" />
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="Message" />
        </f:facet>
        <h:outputText value="#{message.text}" />
    </p:column>
</p:dataTable>
            
Components and more
Documentation pe:javascript
Attributes (move mouse over the names to see data types)
Name Description
execute The javascript which should be executed.
disabled Boolean value to specify the rendering of the behavior, when set to false behavior will not be rendered.
event The name of the event.
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 13.0.0,PrimeFaces Extensions: 13.0.1,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2023-09-11 19:07