Dynamic Data passing from VisualForce page into the Apex Controller using a Apex checkbox coloumn

This post is just to expose the one of the way to sending a records/datas displayed in the visualforce page in to our apex controller, The data displaying in vf page is queried in the databased using the same apex controller, the point is to send the back the selected records from the overall queried records displayed in the visualforce page.
Generally this can be achieved by using wrapper class functionality of Apex, its a great functionality,as well as bit hard to understand and implement though, so below code is just some simple workaround to achieve this by the help of simple javascript.

The Below code just sending the selected records recordids to the apex controller seperated by commas, we can treat it as a set in apex class,the ids going to send can be displayed as alert message in visualforce page for the reference.

This is just the sample code to give you the idea, soon will post the complete workaround code.

VisualForce Code:

1. <apex:page tabStyle="Task" sidebar="false" showHeader="false" id="page1" controller="clsSearchContact">
2. <apex:form >
3. <script>
4. var flag=0;
5. var SelectConId1='';
6. function checkAll(cb)
7. {    
8.     flag=0;
9.     SelectConId1='';
10.     var inputElem = document.getElementsByTagName("input");
11.     for(var i=1; i<inputElem.length; i++)
12.     {
13.         if(inputElem[i].id.indexOf("checkedone")!=-1)
14.         {
15.             inputElem[i].checked = cb.checked;
16.             flag=flag+1;
17.             SelectConId1=SelectConId1+inputElem[i].name+',';
18.         }
19.     }
20.     if(cb.checked!=true)
21.     {
22.         SelectConId1="";
23.         flag=0;
24.     }
25.     alert(SelectConId1);
26.  
27. }
28.  
29. function checkone(cb)
30. {
31.     var countchbox=0;
32.    
33.     if(cb.checked)
34.     {  
35.         flag=flag+1;
36.         if((SelectConId1.length)<=1)
37.         {
38.             SelectConId1=cb.name+',';
39.         }
40.         else
41.         {
42.             SelectConId1=SelectConId1+cb.name+',';
43.         }
44.     }
45.     else if((cb.checked)!=true)
46.     {
47.         flag=flag-1;
48.         if((SelectConId1.length)<=1)
49.         {
50.             SelectConId1=cb.name+',';
51.         }
52.         else
53.         {
54.             var allids=SelectConId1.split(',');
55.             var idarray='';
56.             for(var i=0;i<allids.length;i++)
57.             {
58.                 if(allids[i]!=cb.name  && allids[i]!='')
59.                 {
60.                     idarray=idarray+allids[i]+',';
61.                 }
62.             }
63.             SelectConId1=idarray;
64.         }
65.     }
66.    
67.      var inputElem = document.getElementsByTagName("input");
68.     for(var i=0; i<inputElem.length; i++)
69.     {
70.         if(inputElem[i].id.indexOf("checkedone"))
71.         {
72.             countchbox=countchbox+1;
73.         }
74.     }
75.     if(flag==countchbox-1)
76.     {
77.           document.getElementById("main").checked=true;
78.     }
79.     else
80.     {
81.          document.getElementById("main").checked=false;
82.     }
83.    alert(SelectConId1);
84. }
85.  
86. function search_element()
87. {
88.     //alert('hello');
89.     var element=document.getElementById("searchtext").value;
90.    // alert(element);
91.     searchelement(element);
92.     return false;
93. }
94. function addtolist()
95. {
96.    
97.     if((SelectConId1.length)<=1)
98.     {
99.         alert('Please select atleast one contact');
100.         return false;
101.     }
102.     else
103.     {
104.         addtolistcontact();
105.     }
106. }
107.  
108. </script>
109.  
110.  
111.     <apex:pageblock tabstyle="account">
112.      <apex:pageBlockSection title="Select Multiple Contact"   collapsible="false" columns="1">
113.      <Apex:pageBlock >
114.            
115.             <apex:pageBlockButtons location="both" >
116.             <apex:outputLabel >&nbsp;</apex:outputLabel>
117.                 <apex:commandButton onclick="return addtolist();" value="Add to List"/>
118.                 <Apex:commandButton value="Done"  onclick="return closethis()"/>
119.             </apex:pageBlockButtons>
120.             <apex:outputPanel >
121.                 <input type="text" id="searchtext"/>
122.                 <apex:actionFunction immediate="true"  action="{!searchcontact}" reRender="pbtable"name="searchelement">
123.                     <apex:param name="assignserach" value="" assignTo="{!searchfiled}"/>
124.                 </apex:actionFunction>
125.                 <apex:commandButton value="search" onclick="return search_element();" />
126.             </apex:outputPanel>
127.             <apex:pageBlockTable value="{!getconlist}" var="cc" id="pbtable">
128.                 <apex:column >
129.                     <apex:facet name="header">
130.                         <input type="checkbox" id="main" onclick="return checkAll(this)"  />
131.                        
132.                     </apex:facet>
133.                      <input type="checkbox" name="{!cc.id}" id="checkedone"  onclick="return checkone(this)"  />
134.                     </apex:column>
135.                 <div id="{!cc.id}">
136.                 <apex:column >
137.                     <apex:facet name="header" >Name</apex:facet>
138.                     {!cc.name}
139.                         </apex:column>
140.                 <apex:column >
141.                     <apex:facet name="header" >Title</apex:facet>
142.                     {!cc.Title}
143.                 </apex:column>
144.  
145.                   <apex:column >
146.                      <apex:facet name="header" >Phone</apex:facet>
147.                     {!cc.phone}
148.                 </apex:column>
149.                   <apex:column >
150.                     <apex:facet name="header" >Email</apex:facet>
151.                     {!cc.email}
152.                 </apex:column>
153.  
154.                 <apex:column >
155.                     <apex:facet name="header" >Account/Company</apex:facet>
156.                     {!cc.account.name}
157.                 </apex:column>
158.                
159.                 <apex:column >
160.                     <apex:facet name="header" >Owner</apex:facet>
161.                     {!cc.owner.name}
162.                 </apex:column>
163.                 </div>
164.             </apex:pageBlockTable>
165.      
166.        
167.        </Apex:pageBlock>
168.        </apex:pageBlockSection>
169.     </apex:pageblock>
170.     </apex:form>
171. </apex:page>

Apex Controller Code:

1. public class clsSearchContact
2. {
3. public string searchfiled{get;set;}
4. public list<contact> getconlist{get;set;}
5.  
6. public clsSearchContact()
7. {
8.     getconlist =new list<contact>();
9.     getconlist=database.query('Select name,phone,email,account.name,title,owner.name from contact limit 10');
10. }
11.  
12. public void searchcontact()
13.     {
14.          try
15.          {
16.        
17.            searchfiled= '%'+searchfiled+ '%';
18.              getconlist =new list<contact>();
19.              getconlist=database.query('Select name,phone,email,account.name,title,owner.name from contact  WHERE Name like :searchfiled limit 100');
20.            
21.          }
22.          catch(Exception e)
23.          {
24.              system.debug('Error'+e);
25.          }
26.     }
27. }