function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
nilesh walkenilesh walke 

Can some one please help me in this task


1. Create a button on account to show only contact related to selected account. On button click open VF page
2. Facility to select the multiple contact from list
3. add Send email button on Table so user will send an Email to selected Contacts
4. Pagination should be present for Table

i have create page using visual force pages but not i want that page using jquery is there any developer who can solve my problemUser-added imagei want this datatable using jquery
PriyaPriya (Salesforce Developers) 

Hi Nilesh,

Please refer below to use Jquery datatable plugin in VF page
http://santanuboral.blogspot.com/2017/12/working-with-jquery-datatable-for.html.

Regards,

Priya Ranjan

nilesh walkenilesh walke
hi priya i have the code please tell me  where i am wrong
public class test4 {
    private String recordId; 
    public List<contactwrapper> contactList{get;set;}
  //  public List<ContactWrapper> wconlist {get;set;}
    public List<contactWrapper> contactWrappersToReturn {get;set;}
   
    public test4(){
   //    contactList = new List<contactwrapper>();
        if(Test.isRunningTest()){
            Account obj = [SELECT Id, Name FROM Account LIMIT 1];
            recordId = obj.Id;    
        }else{
            recordId = ApexPages.currentPage().getParameters().get('id');
       }
     //            contactList.addAll(getcontactWrappers());
    }
    public  List<contactWrapper> getcontactWrappers() {
          contactWrappersToReturn = new List<contactWrapper>();      
        List<Contact> conlist = [SELECT ID, LastName,phone,Email from Contact WHERE AccountId=:recordId]; 
       for (Contact conn : conlist ) {   
           ContactWrapper conWrapper = new ContactWrapper();
            conWrapper.con = conn ;          
            contactWrappersToReturn.add(conWrapper);
        }   //collecting the contacts in a list-->
        return contactWrappersToReturn;   
    }      
     public class contactWrapper{
        public contact con { get; set; }
        public boolean isSelected {get; set;}
    }
    public PageReference SendMail(){        
        List<Contact> selectedContacts = new List<Contact>();
        selectedContacts.clear();
        System.debug('==>Inside sendEmail() '+ contactWrappersToReturn);
        for(ContactWrapper selectedEmails: contactWrappersToReturn) {
            if(selectedEmails.isSelected == true) {                        
                selectedContacts.add(selectedEmails.con);
                System.debug('emails '+ selectedContacts);
            }
        }
        System.debug('toaddresses==>'+ selectedContacts);
        String []toAddresses = new List<String>();    
        for(Contact con : selectedContacts) {
            toAddresses.add(con.Email);           
        }
        System.debug('toaddresses==>'+toAddresses);
        Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
        mail.setToAddresses(toAddresses);
        mail.setSubject('Account related contacts' );
        mail.setHtmlBody('thanks for contacts');
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });   
        return null;       
    } 
    
}
<apex:page controller="test4" showHeader="false" standardStylesheets="false">
    <apex:form > 
        <apex:pageBlock > 
            <apex:pageBlockButtons location="bottom" >
                <apex:CommandButton value="Send Email" action="{!SendMail}" reRender="table" />
            </apex:pageBlockButtons>    
            <apex:stylesheet value="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"/>
            <apex:includeScript value="//code.jquery.com/jquery-1.10.2.min.js"/>
            <apex:includeScript value="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"/>
            <div style="width:80%; margin-left:auto; margin-right:auto; margin-top:50px;">
                <table id="table_id" class="display">
                    <thead>
                        <tr>
                            <th> SelectAll<input id="chktrue" type="checkbox" class="selectAll" checked=""/></th>
                            <th>Contact Name</th>
                            <th>phone</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <apex:repeat value="{!contactList}" var="conlist">
                            <tr>
                                <td><input type="checkbox"  value="{!conlist.isSelected}"  name="chk{!conlist.con.id}"/></td>
                                <td>{!conlist.con.Lastname}</td>
                                <td>{!conlist.con.phone}</td>
                                <td>{!conlist.con.Email}</td>
                            </tr>
                        </apex:repeat>               
                    </tbody>
                </table>
            </div>
            <script>
            $(document).ready( function () {
                $('#table_id').DataTable();
                $('#isSelected').attr('disabled','true');
            } );            
            (function($) {               
                'use strict';               
                $.fn.extend({
                    checkboxes: function(options) {
                        // Default option
                        var defaults = {
                            itemChild: ''
                        };                        
                        var option = $.extend(defaults, options);
                        // Checked value function
                        function checkedValue(element, bool) {
                            if (bool) {
                                return element.each(function() {
                                    $(this).prop('checked', true);
                                });
                            } else {
                                return element.each(function() {
                                    $(this).prop('checked', false);
                                });
                            }
                            $(":checkbox").click(function(){
                                $("#id").text(this.value)
                            })                            
                        }                        
                        // Return checked or unchecked
                        return this.each(function() {
                            var obj = option,
                                $itemAll = $(this),
                                $itemChild = $('input[name^="' + obj.itemChild + '"]');
                                                        // Checked all checkbox before parent checked load page
                            if ($itemAll.is(':checked')) {
                                checkedValue($itemChild, true);
                            }
                      // Checked all or unchecked checkbox when parent checkbox checked or unchecked
                            $itemAll.change(function() {
                                var $self = $(this);
                                
                                if ($self.is(':checked')) {
                                    checkedValue($itemChild, true);
                                } else {
                                    checkedValue($itemChild, false);
                                }
                            });
                   // Checked parent checkbox when all child checkbox checked
                            $itemChild.change(function() {
                                var flag = true;
                                
                                if (!$itemChild.is(':checked')) {
                                    console.log(!$itemChild.is(':checked'));
                                    $itemAll.prop('checked', false);
                                }
                                
                                $itemChild.each(function() {
                                    var $self = $(this);
                                    if (!$self.is(':checked')) {
                                        flag = false;
                                        return;
                                    }
                                });                               
                                $itemAll.prop('checked', flag);
                            });                           
                        });
                    }
                });
            })(jQuery);           
            $(document).ready(function() {
                $('.selectAll').checkboxes({
                    itemChild: 'chk'
                });
            });
            </script>            
        </apex:pageBlock>  
    </apex:form> 
</apex:page>