How to put a delete button for an object in a Primefaces data table?

Question

I have a data table with a couple of rows and I have a column where I have a form with a simple button that deletes the object in that row.

So first the working version:

<h:dataTable value="#{actorTableBackingBean.allActors}" 
    var="actor" styleClass="table table-bordered">

    <h:column headerText="Actor Name" sortBy="#{actor.firstName}">
        <h:outputText value="#{actor.firstName}"/>
    </h:column>

    <h:column headerText="Actor Detail">
        <h:form>
            <h:commandButton value="Delete Actor" 
                styleClass="btn btn-primary" 
                action="#{actorTableBackingBean.deleteActor(actor.actorId)}"/>
         </h:form>
    </h:column>
</h:dataTable>

And this is what deleteActor method looks like:

public String deleteActor(String id){
    removeActorWithId(id);
    return "/allActors.xhtml";
}

private void removeActorWithId(String id){
    int idk = Integer.parseInt(id);
    for(Actor a:allActors){
        if(a.getActorId() == idk){
            allActors.remove(a);
            return;
        }
    }
}

So this exactly works as expected as it is.

However, when I use a Pagination Data table of Primefaces as shown in here, delete button works only for the FIRST ROW in the second case and only for the first time. When I click on button "Delete" for other rows, simply nothing happens. What might be the reason?

For second situation just put the < form > tags around p:dataTable as seen in the link and replace everything like h:dataTable to p:dataTable and p:column etc...

Answer 1

I would suggest that you make the form tag contain your datatable. This works:

<h:form id="actorsTableForm">
            <p:dataTable id="actorsTable" var="item"
                value="#{actorsMB.actorList}" selectionMode="single"
                rowKey="#{item.description}" paginator="true" rows="10"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="5,10,15" paginatorPosition="bottom">
                <p:column headerText="Actor Id" >
                    <h:outputText value="#{item.id}" />
                </p:column>
                <p:column headerText="Actor Description">
                    <h:outputText value="#{item.description}" />
                </p:column>
                <p:column>
                    <p:commandButton icon="ui-icon-trash"
                        title="Delete this actor"
                        actionListener="#{actorsMB.remove(item)}"
                        ajax="false" />
                </p:column>
            </p:dataTable>
</h:form>

And the method in the managed bean:

public void remove(Actor actor) {
    try {
        actorService.remove(actor);
        actorList = actorService.searchAll();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Hope it helps.

Answer 2

Following code might help you.

Your xhtml code should be like this

    <h:form>
         <h:dataTable value="#{actorTableBackingBean.allActors}" 
            binding="#{actorTableBackingBean.dataTable}"
            var="actor" styleClass="table table-bordered">

            <h:column headerText="Actor Name" sortBy="#{actor.firstName}">
                <h:outputText value="#{actor.firstName}"/>
            </h:column>

            <h:column headerText="Actor Detail">
                <h:commandButton value="Delete Actor" 
                        styleClass="btn btn-primary" 
                        action="#{actorTableBackingBean.deleteActor}"/>

                </h:column>
        </h:dataTable>
   </h:form>

You have to add one DataTable variable in bean file

private javax.faces.component.html.HtmlDataTable dataTable;

public HtmlDataTable getDataTable() {
    return dataTable;
}

public void setDataTable(HtmlDataTable dataTable) {
    this.dataTable = dataTable;
}

Your delete method should be like this

public String deleteActor(){
    Actor model = (Actor) dataTable.getRowData();
    removeActorWithId(model);
    return "/allActors.xhtml";
}

private void removeActorWithId(Actor model){
    if(model!=null){
        allActors.remove(model);
    }
}