AJAX - DataTable

In this example, datatable is updated with ajax.

New Book
Title
Author
No records found.

Source

<h:form id="form">

    <p:growl showDetail="true" />

    <p:panel header="New Book">
        <h:panelGrid columns="2">
            <h:outputLabel value="Title :" for="txt_title"></h:outputLabel>
            <p:inputText id="txt_title" value="#{createBookBean.book.title}" required="true" label="Title"/>

            <h:outputLabel value="Author :" for="txt_author"></h:outputLabel>
            <p:inputText id="txt_author" value="#{createBookBean.book.author}" required="true" label="Author"/>
        </h:panelGrid>
    </p:panel>

    <p:commandButton value="Add" action="#{createBookBean.createNew}" update="@form" style="margin:10px 0" id="btnAdd"/>

    <p:dataTable value="#{createBookBean.books}" var="book" id="bookTable">

        <p:column>
            <f:facet name="header">
                <h:outputText value="Title" />
            </f:facet>
            <h:outputText value="#{book.title}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Author" />
            </f:facet>
            <h:outputText value="#{book.author}" />
        </p:column>

    </p:dataTable>
</h:form>