How to create effective “select all” checkbox in JSF

Question

I want to implement select all checkbox into JSF h:datatable. This is the code if the h:datatable:

Answer 1

I have used this code to selectAll checkbox :

$(window).load(function () {

    $(document).delegate(".checkall", "click", function(event) {
          $(this).closest("table").find(':checkbox').attr('checked', this.checked);
    });
});

it is working fine when I select/deselect checkbox in header then all the checkbox under that column are selected/deselected. But if again Iam selecting the same, then other checkboxes are not selected. .

Answer 2

You can do something like this

<h:column id="selection_column">
    <f:facet name="header">
         <h:selectBooleanCheckbox class="checkall"/>
    </f:facet>
    <h:selectBooleanCheckbox value="#{SessionsController.selectedIds[item.aSessionID]}" />
</h:column>

in your js put this code

    $(window).load(function () {
        $(document).delegate(".checkall", "click", function(event) {
              $(this).closest("table").find(':checkbox').attr('checked', this.checked);
        });
    });

b.t.w instead of storing in map you can add attribute to your iterated item like this: instead of value="#{SessionsController.selectedIds[item.aSessionID]}" something like this value="#{item.selected}"

and later on you can iterate over them in the server side and add to list that will be sent to you r delete method...

Answer 3

The selection is a client-side operation. So you can achieve that using JavaScript. An idea, is to add a specific CSS class to all the checkboxes that you want to select (it will then be easier to select them all):

<h:column>
    <f:facet name="header">
        <h:outputText value="Select" />
    </f:facet>
    <h:selectBooleanCheckbox styleClass="selectable-checkbox" onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
</h:column>

Then, you can simply use the following jQuery code to check all the elements with this specific CSS class: jQuery(".selectable-checkbox").attr("checked", true);.

If you are not using jQuery, you can do the same thing, tuning a little bit the code shown here: How to Get Element By Class in JavaScript?

---

Regarding your Edit:

You want to have a button Select all that deletes all the items in your table?

If you need to achieve that, rename this button to Delete all items that will simply call a Java method (i.e. a classic <h:commandButton> or <h:commandLink>), without having to select checkboxes. What would be the interest of selecting the items, as you will delete them just after that?

Answer 4

For JSF 2 ,for selected all rows in datatable in selectionMode multiple with paginator=true: In Page

<p:dataTable widgetVar="tableArea" yourtags...>
   <p:ajax  event="toggleSelect" oncomplete="teste()" /> /// toggleSelect is dispared on click to checkbox header
<p:column id="columnId" selectionMode="multiple"/>

In js:

function teste(){    		
	var checked = $(document).find(":checkbox")["0"].checked; ///Find checkbox header and verify if checkbox is checked
	if(checked == true){
		PF('tableArea').selectAllRows(); // if true, selectAllRows from datatable
	} else {
		PF('tableArea').unselectAllRows(); //
	}		
}