I am using rich:dataTable with  collaspibleSubtTbleToggler which it renders data from a been then users can select rows and submit(the form) the button then another beans gets data and save it.

The problem is we have to use the dataScroller for paginations because many rows. Now I figure it out that the rich:datatable  lose reference to previous DOM objects, Instead JQuery Pagination API will retain the previous page DOM.is this a correct?

is there any way to be able to keep track of selected rows? or I have to use the jquery instead.Is there any way to continue with rich:datatable?

I appreciate your help. here are the codes:

After submitting the form in the bean I get all data with the ID_SELECTED_TOTAL the string with all variables like this:

ID_SELECTED_TOTAL="00033635#@#@#approve@@##b8e71fe8328e4e928fdfb7a5b2c0b76d@##@#reject@@##"; Then I use split("\\###@@") and get all data without any problems.

Here are the short JavaScrpt codes:

function toggleButtons(obj)

  {   if($(obj).hasClass('selected'))

  {  $(obj).removeClass('selected');  }

  else  {  $(obj).addClass('selected');

  $(obj).next().removeClass('selected');

  $(obj).prev().removeClass('selected');  }  }

function function_submit(){

   if($(this).hasClass("rf-cst")){

$(this).children('tr').each(function(){

     jQuery(this).children('td').each(function(){

  if(jQuery(this).children('div').hasClass('imageRadio'))

  {     totalnumberofwitmes++;

     if(jQuery(this).children('div:first-child').attr("class").indexOf("approveRadio")>=0 && jQuery(this).children('div:first-child').attr("class").indexOf("selected")>=0)

   {   columnstext=columnstext+"approved";

       columnstext_val="approve";     takenaction++;

      userHasTackenactionornot++;

   }   else if(jQuery(this).children('div:nth-child(2)').attr("class").indexOf("revokeRadio")>=0 && jQuery(this).children('div:nth-child(2)').attr("class").indexOf("selected")>=0)

   {    columnstext=columnstext+"rejected";

        columnstext_val="reject";

   takenaction++;   userHasTackenactionornot++;

   }   else {   columnstext=columnstext+"pending";

   columnstext_val="pending";

   noofitemspending++;   }  

  }else {  columnstext+=jQuery(this).html();   }

   if(noofitemspending == 0 && columnstext_val != ""){

approvalId_val=document.getElementById("form:table_name:"+$(this).attr('id').split(':')[2]+":sbtbl:"+$(this).attr('id').split(':')[4]+":approvalId").value;

  if(columnstext_val == "reject"){

   comments_val=document.getElementById("commentid_"+approvalId_val).value;

   workitemComment_val=document.getElementById("form:table_name:"+$(this).attr('id').split(':')[2]+":sbtbl:"+$(this).attr('id').split(':')[4]+":workItemName").value;

   if(comments_val <=0){

  alertMsgBox("Please provide the comments for rejected items in the workitem :  "+workitemComment_val);

  counter=true;  

   }  }  if(!counter){

  columnstext_val=columnstext_val+"@@##"+approvalId_val;

  //console.log(columnstext_val);

     WItemCount.push(columnstext_val);

     }  }

  columnstext_val="";  comments_val="";  approvalId_val="";  workitemComment_val="";

  if(counter)   return false;  });   });

    var workitemno_val=document.getElementById("form:table_name:"+$(this).attr('id').split(':')[2]+":sbtbl:0:workItemName").value;

    var tablecount_val=document.getElementById("form:table_name:"+$(this).attr('id').split(':')[2]+":sbtbl:0:collapsSubTableNumber_Count").value;

if(noofitemspending!=tablecount_val && noofitemspending > 0){

  alertMsgBox("Please take completed action for the workitem number "+workitemno_val);

  counter=true;   }else{

  if(userHasTackenactionornot >0 && noofitemspending == 0)      TotalCount.push(workitemno_val+"#@#@#"+WItemCount.join("@##@#"));     }

   }  if(counter)  return false;  });

  if(userHasTackenactionornot == 0){

  alertMsgBox("Please take action for any one of the workitem");

  counter=true;  }

  document.getElementById('form:ID_SELECTED_TOTAL').value=TotalCount.join("###@@");

  if(counter)  {  return false;  }  else {  return true;  }  }

  <h:form id="form"> 

  <h:panelGrid    style="border:none;margin:3 auto;width:100%;">   

     <rich:dataTable  id="table_name" value="#{customBeanTwo.workItemApprovalLists}"  styleClass="table-layout: fixed; width: 100%;" var="list" rows="5" >

  <f:facet name="header">

  <rich:columnGroup>

                    <rich:column colspan="5"  style="background-color:#000000;">

                        <h:outputText   style="font-size: 13px;padding: 4px;" value="Requestee" />

                    </rich:column>

   <rich:column colspan="7">

                        <h:outputText  style="font-size: 13px;padding: 4px;" value="Access Request" />

      </rich:column>

                    <rich:column breakRowBefore="true">

                        <h:outputText value="WorkItem/Decision" /><h:inputHidden value="#{customBeanTwo.allItems}" id="nrAllItems" />

                    </rich:column>            

                   <rich:column>

                        <h:outputText value="Requester Comments" />

                    </rich:column>

                </rich:columnGroup>

            </f:facet>

  <rich:column colspan="12">

                <rich:collapsibleSubTableToggler for="sbtbl" />

    <h:outputText value="#{list.item}" />, <h:outputText value="#{list.description}"  style="font-weight:bold" />

            </rich:column>

  <rich:collapsibleSubTable value="#{list.approvalItems}" var="item" id="sbtbl" expandMode="client" expanded="true" rows="9">    

<rich:column>

                <h:inputHidden id="ID_SELECTED_TOTAL" value="#{customBeanTwo.totalWItemAction}"/>

                 <div style='float:left;width:20px;height:20px' class='approveRadio imageRadio' onclick="toggleButtons(this);"> </div>

          <div style='margin-left:21px;width:20px;height:20px' class='revokeRadio imageRadio' onclick="toggleButtons(this);"> </div>

     </rich:column>   

                <rich:column>                 

  <input id="commentid_#{item.approvalId}" name="comment_#{item.approvalId}" value="#{item.comment}" style="font-size: 11pt; height: 25px; width:280px;" />

                </rich:column>

  </rich:collapsibleSubTable>              

        </rich:dataTable>      

  <rich:dataScroller align="right" for="table_name" maxPages="5" fastStep="3" />

  <h:commandButton value="Submit"action="#{customBeanTwo.saveComplete}"  class="btn primaryBtn btn btn-success btn-next"  onclick="return function_submit();return false;"/>

</h:panelGrid>

    </h:form>