Datatable does not update after rows removed - jsf

Question

i have a datatable using the primefaces library, and while i have got all the functions working i have just one small issue, when i press the command link to remove the row, it works and the row gets removed but it does not automatically update the datatable to reflect this, ideally what i want is when the user presses the delete button it automatically updates the datatable to show this, how can i achieve this ?
here is the datatable
<p:dataTable id="UserTable"
widgetVar="usersTable"
value="#{userdetailsController.items}"
var="item"
emptyMessage="No details was found with given criteria">
<!--filteredValue="{userdetailsController.filteredUsers}" -->
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields: " />
<p:inputText id="globalFilter" onkeyup="usersTable.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="USERID" filterBy="id"
headerText="i.d."
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListUserdetailsTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<!--There are four different match modes, "startsWith"(default), "endsWith", "contains" and "exact"-->
<p:column id="USERNAME" filterBy="username"
headerText="username."
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListUserdetailsTitle_username}"/>
</f:facet>
<h:outputText value="#{item.username}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
<p:commandLink action="#{userdetailsController.prepareView}" value="#{bundle.ListUserdetailsViewLink}"/>
<h:outputText value=" "/>
<div class="divider"/>
<p:commandLink action="#{userdetailsController.prepareEdit}" value="#{bundle.ListUserdetailsEditLink}"/>
<h:outputText value=" "/>
<div class="divider"/>
<p:commandLink action="#{userdetailsController.destroy}" value="#{bundle.ListUserdetailsDestroyLink}"/>
</p:column>
</p:dataTable>

Answer 1

You need to use the update attribute of the p:commandLink to tell PF you want to do the ajax request to obtain all data related to table UserTable like this:
<p:commandLink actionListener="#{userdetailsController.destroy}" value="#{bundle.ListUserdetailsDestroyLink}" ajax="true" update="UserTable"/>
Make sure to use actionListener as it is called before action atrib. A more detailed example is here
http://www.primefaces.org/showcase/ui/commandLink.jsf

Answer 2

Per the documentation, you need to make a call to Draw() after you remove a row.
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'img.icon-delete', function () {
table
.row( $(this).parents('tr') )
.remove()
.draw();
} );