select all in datatable jsf primefaces

3
votes

Im trying to create a select all button or check box that when clicked all the selectbooleanCheck boxes will be checked. is there no straight forward easy way.ive started creating the selectcheckbox that will when changed selectAll. thanks

 <p:dataTable value="#{illRequestModel.list}"  
                        var="illRequestRecord" width="100%" styleClass="request-table"
                        rows="10" paginator="true" id="requestGrid" 
                        currentPageReportTemplate="Viewing Page {currentPage}"
                        paginatorTemplate="{CurrentPageReport}   {PageLinks}  "
                        paginatorPosition="bottom">
                        <p:column >
                        <f:facet name="header">
                                <h:selectBooleanCheckbox id="checkbox2" title="emailUpdates2" onchange="CheckAll()" > 

                                </h:selectBooleanCheckbox>
                            </f:facet>
                            <h:selectBooleanCheckbox id="checkbox" title="emailUpdates"
                                value="#{illRequestRecord.selected}"
                                onchange="addNumber(#{illRequestRecord.localRequestId})"> 
                                <f:ajax listener="#{illRequestRecord.selectmethod}" />
                                </h:selectBooleanCheckbox>
                        </p:column>
                        <p:column id="localRequestIdCol"
                            sortBy="#{illRequestRecord.localRequestId}">
                            <f:facet name="header">
                                <h:outputText value="ID" />
                            </f:facet>
                            <h:commandLink value="#{illRequestRecord.localRequestId}"
                                action="#{requestListController.displaySingleRecord}">
                                <f:param name="selectedItemId"
                                    value="#{illRequestRecord.localRequestId}"></f:param>
                            </h:commandLink>
                        </p:column>
3
jsfprimefacesdatatable

3 Answers

7
votes

Why don't you use the same multi-selection datatable used in the PrimeFaces DataTable showcase As you can see in:

 <p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">

It will automatically add a check-all functionality. In case you want an external checkbox to check all, you can do the following. Give a widgetVar to you datatable, let's call it dataTableWV

 <p:dataTable widgetVar="dataTableWV" id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">

And you have a checkbox:

 <input id="checkAll" type="checkbox" />

You can register a click event on it like the next:

 <script>
      $(document).ready(function() {
          $('#checkAll').on('click', function() {
               //selects all records on the displayed page if pagination is supported.
               dataTableWV.selectAllRowsOnPage();

               //or you can select all the rows across all pages.
               dataTableWV.selectAllRows();
          });
      });
 </script>
6
votes
<p:dataTable widgetVar="dataTableWV" id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">
  <f:facet name="header">
      <p:commandButton value="select" onclick="PF('dataTableWV').selectAllRows()" />
      <p:commandButton value="unselect" onclick="PF('dataTableWV').unselectAllRows()" />
  </f:facet>
</p:dataTable>
1
votes
Sample Code:-

**JAVA (your backing bean class)
==============================**
//Stores the checked items from data table.
private List<String> selectedIds = new ArrayList<>();

private List<String> getSomeList() {
// return list of strings to data table
  return someList;
}

public void selectAllCheckboxes(ToggleSelectEvent event) {
if (selectedIds != null)  {
    selectedIds.clear();
    if (event.isSelected()) {
        selectedIds.addAll(someList); //Add all the elements from getSomeList()
    }
 }
}

**XHTML
=====**

<p:dataTable id="data-table-id" value="#{backingBean.someList}"
selection="#{backingBean.selectedIds}" rowKey="#{id}" var="id"                   
paginator="true" rows="10" paginatorPosition="bottom"
paginatorAlwaysVisible="false" rowSelectMode="checkbox"
rowsPerPageTemplate="10,20,30,50">

<p:column selectionMode="multiple" />
<p:ajax event="toggleSelect" 
update="@this"listener="#backingBean.selectAllCheckboxes}"/>

</p:dataTable>