[SalesForce] Jquery Datatable pagination checkbox

EDIT:

I just wanted to expand little bit more give you guys more information as possible so my question is more towards the jquery datatable so when you go to different pages my checkbox is retain the checkbox checked and my question is more towards the jquery datatable when I click submit button it only gets the value of a current page instead of different pages across the datatable.

Hope this is clears

Visualforce page Component source code: JQuery DataTable

source code:

<apex:component id="pbEnhancerMain" layout="block" selfClosing="true">

   <apex:attribute type="String" required="true" name="targetPbTableIds" description="A comma seperated list of Ids of target pageblock table" />
   <apex:attribute type="boolean" name="paginate" description="assign true if you want to use the pagination feature,default value is true" default="true"/>
   <apex:attribute type="Integer" name="defaultPageSize" description="Default page size when pagination is implemented"/>
   <apex:attribute type="String" name="pageSizeOptions" description="A comma seperated list of integer values that will displayed as dropdown for page size"/>
   <apex:attribute name="noConflict" type="boolean" default="true" description="initiates jquery with noConflict so that jquery doesnt conflicts with standard components, by default it is set to true"/>
   <apex:attribute type="boolean" name="enableExport" description="Set this value to true if you want to display the export toolbar" default="true"/>
   <apex:attribute type="String" name="exportFileName" description="File name to used for the files exported from table"/>

    <apex:includescript value="https://code.jquery.com/jquery-1.11.1.min.js" / >
    <apex:includescript value="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js" />


   <apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'typeDetection.js')}"/>
   <apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"/>
   <apex:stylesheet value="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
   <apex:stylesheet value="https://cdn.datatables.net/1.10.12/css/jquery.dataTables_themeroller.css" />     
   <apex:outputPanel rendered="{!enableExport}" layout="none">
       <apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources, 'TableTools/js/TableTools.min.js')}" />
       <apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources, 'TableTools/js/ZeroClipboard.js')}" />
       <!--apex:stylesheet value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources, 'TableTools/css/TableTools_JUI.css')}" /-->
   </apex:outputPanel>
   <script>

      function PageBlockTableEnhancerADV(){
             var PbeAdv=this;

             jQuery(function($){ 
                    PbeAdv.init($)
             });
      }

      PageBlockTableEnhancerADV.prototype={
            init : function($){
               try{

                      var targetIds = '{!targetPbTableIds}';
                      var targetIdArray = targetIds.split(",");

                      $(targetIdArray ).each(function(){

                        var elem = this.trim();
                        var elemObj = $("[id$='"+elem+"']");
                        elemObj.addClass("BlogForce9TableADV");
                      });

                      dataTable = $('.BlogForce9TableADV').dataTable({

                            "bJQueryUI": true,
                            "aaSorting": [],
                            "bPaginate" : {!paginate},
                            "bDestroy": true,
                            "sPaginationType": "full_numbers",
                            "sDom": '<T><"ui-helper-clearfix dtExport"><><"H"lfr>t<"F"ip>',
                            "aLengthMenu": getALengthMenu(),
                            "iDisplayLength": {!IF(defaultPageSize == NULL,10,defaultPageSize)},
                            "sDom": '<T><"ui-helper-clearfix dtExport"><><"H"lfr>t<"F"ip>'
                            <apex:outputPanel layout="none" rendered="{!enableExport}">
                            ,"oTableTools": {
                                "sSwfPath": "{!URLFOR($Resource.PageBlockTableEnhancerADVResources, 'TableTools/swf/copy_csv_xls_pdf.swf')}",
                                "aButtons": [
                                    "copy",
                                    "print",
                                    {
                                        "sExtends": "csv",
                                        "sTitle": "{!exportFileName}"
                                    },
                                    {
                                        "sExtends": "xls",
                                        "sTitle": "{!exportFileName}"
                                    },
                                    {
                                        "sExtends": "pdf",
                                        "sTitle": "{!exportFileName}"
                                    }
                                ]
                            }
                            </apex:outputPanel>
                      });

                  }

                  catch(err){
                      if (typeof console == "object") {
                          console.log(err);
                      }
                  }  

            }
      }

      function getALengthMenu(){
          var temp = [ 10, 20, 30, 50];
          if({!pageSizeOptions != NULL}){ 

              temp = "{!pageSizeOptions}".split(",");
              for (a in temp ) {
                  temp[a] = parseInt(temp[a], 10); 
              }
          }

          return temp;
      }

      function initPageBlockTableEnhancerADV(){
          new PageBlockTableEnhancerADV({});
      }
      if({!noConflict}){
          jQuery.noConflict();
      }
      initPageBlockTableEnhancerADV();      
   </script> 
   <style>
        .paging_full_numbers .ui-button{
            color:black !important;
        }

        .dtExport{
            padding:5px;
        }
    </style>

   </apex:component>

I'm using JQuery Datatables Visualforce componenet from here JQuery Datatable Visualforce page Componenet

The problem is, I can't do a checkbox selection across the pages. apex:pageblocktable has mutiple pages to it. If I click submit, it only submits the array of checkboxes for the current page I am on.

How do I get selection across the pages when I submit?

    <c:PageBlockTableEnhancerADV targetPbTableIds="pbt"  pageSizeOptions="5,10,15,30" defaultPageSize="15" enableExport="true"/>
    <apex:pageBlock mode="maindetail" id="pb">                     
       <apex:pageblocksection title="This table is enhanced by PageBlockTableEnhancerADV" columns="1" collapsible="false">
           <apex:pageblockTable value="{contacts}" var="con" id="pbt" >
<apex:column headerValue="Choose Contact">                    
               <apex:column>
               <apex:inputCheckbox value="{!con.isActive__c}" id="chkActive"/>                    
               </apex:column>
                <apex:column value="{con.firstName}"/>
                <apex:column value="{con.lastname}"/>
                <apex:column value="{con.Account.Name}"/>
                <apex:column value="{con.Birthdate}"/>
                <apex:column value="{con.LastModifiedDate}"/>
            </apex:pageblockTable>
        </apex:pageblocksection>
        <apex:pageBlockButtons >
            <apex:commandButton value="Rerender" oncomplete="initPageBlockTableEnhancerADV();" rerender="pb"/>
        </apex:pageBlockButtons>
    </apex:pageBlock>

Best Answer

You'll need to have your controller cache those checkbox values on update. I've got a lengthy explanation and code examples in this similar question