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.

Why did you tag the question with JavaScript? What do you need to do with the count? Part of the answer will need to be done in the backend. — Jasper de Vries, Dec 22 '22 at 07:53
I need to disable and enable a button if checked checkbox is more than 2. — disha agarwal, Dec 23 '22 at 09:45
This question is not Java related. Please don't use irrelevant tags. — Jasper de Vries, Dec 23 '22 at 11:01
There is no PrimeFaces related code. It means both primefaces and primefaces-datatable tags are irrelevant. — Vasil Lukach, Dec 23 '22 at 23:53

score 0 · Answer 1 · answered Dec 24 '22 at 09:29

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}" .../>

How to count checked checkboxes in paginated table PrimeFaces

1 Answers1