How to count checked checkboxes in paginated table PrimeFaces

Question

I want to count total no of checked checkboxes in whole table. Currently when I switch to different table page it doesn't take into account checked checkbox of previous table page. My table looks like this:

<div id="D625_S002_E042" class="ui-datatable ui-widget hpsapf-datatable ui-grid-col-12 ui-datatable-reflow">
   <div class="ui-datatable-tablewrapper">
      <table role="grid" summary="abcd" aria-describedby="D625_S002_E042_summary">
         <tbody id="D625_S002_E042_data" class="ui-datatable-data ui-widget-content" tabindex="-1">
            <tr data-ri="0" aria-selected="false" class="ui-widget-content ui-datatable-even ui-datatable-selectable">
               <td class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
            </tr>
            <tr data-ri="1" data-rk="99fcc576-c1ab-4f98-9613-84f9ce5efc77" role="row" aria-selected="false" class="ui-widget-content ui-datatable-odd ui-datatable-selectable">
               <td role="gridcell" style="width:36px;text-align:center" class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
               <td role="gridcell" style="width: 74%" tabindex="-1">
                  <div id="D625_S002_E042:1:D625_S002_E044_OUTPUT" class="ui-cell-editor-output">Eintrager</div>
               </td>
            </tr>
            <tr data-ri="2" data-rk="ebc4121d-9d11-49c0-a544-af15a0f9706c" role="row" aria-selected="false" class="ui-widget-content ui-datatable-even ui-datatable-selectable">
               <td role="gridcell" style="width:36px;text-align:center" class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
               <td role="gridcell" style="width: 74%" tabindex="-1">
                  <div id="D625_S002_E042:2:D625_S002_E044_OUTPUT" class="ui-cell-editor-output">Fachlicher Admin</div>
               </td>
            </tr>
            <tr data-ri="3" data-rk="b1b4993d-d4ce-4bf9-95f3-5461f58b3276" role="row" aria-selected="false" class="ui-widget-content ui-datatable-odd ui-datatable-selectable">
               <td role="gridcell" style="width:36px;text-align:center" class="ui-selection-column" tabindex="-1">
                  <div class="ui-chkbox ui-widget" tabindex="-1">
                     <div class="ui-helper-hidden-accessible" tabindex="-1"><input type="checkbox" name="D625_S002_E042_checkbox"  tabindex="-1"></div>
                     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" tabindex="-1"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" tabindex="-1"></span></div>
                  </div>
               </td>
               <td role="gridcell" style="width: 74%" tabindex="-1">
                  <div id="D625_S002_E042:3:D625_S002_E044_OUTPUT" class="ui-cell-editor-output">Justizverwaltung</div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>

I tried getting length of checked checkbox using this

$("#D625_S002_E002").find("td.ui-selection-column div.ui-chkbox-box.ui-state-active").length

but getting length of only one table page not whole table.

Answer 1

I would add rowSelectCheckbox and rowUnselectCheckbox Ajax event listeners on your p:dataTable and update the button. In the button dynamically check if it should be enabled based on the selection size. Something like:

<p:dataTable selection="#{bean.selectedItems}" ...>
    ...
    <p:ajax event="rowSelectCheckbox" update="myButton"/>
    <p:ajax event="rowUnselectCheckbox" update="myButton"/>
</p:dataTable>
<p:commandButton id="myButton" disabled="#{bean.selectedItems.size() gte 2}" .../>

See also:

• Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
• https://primefaces.github.io/primefaces/12_0_0/#/components/datatable
• https://primefaces.github.io/primefaces/12_0_0/#/components/commandbutton