You need to sign in to do that
Don't have an account?
nilesh walke
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 problemi want this datatable using jquery
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 problemi want this datatable using jquery
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
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>