Jquery Data tables in Visualforce pages.
Examples 1:
Hi, In this post i am giving basic example of Jquery Data tables using in visualforce. It will give you the pagination ans search functionality in visualforce page.
Controller Class:
public class DataTableExampleController {
public List<Contact> contactList {
get {
if (contactList == null) {
contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 10000];
}
return contactList;
}
set;
}
}
Visualforce Page:
<apex:page Controller="DataTableExampleController" readOnly="true">
<head>
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
<apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script>
j$ = jQuery.noConflict();
j$(document).ready( function () {
var contactTable = j$('[id$="contacttable"]').DataTable({
});
});
</script>
</head>
<body>
<table id="contacttable" class="display">
<thead>
<tr>
<th>Account</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!contactList}" var="contact">
<tr>
<td>{!contact.Account.Name}</td>
<td>{!contact.FirstName}</td>
<td>{!contact.LastName}</td>
<td>{!contact.Phone}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</body>
</apex:page>
Example 2:
<apex:page >
<head>
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
<apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<!-- I have a static resource called famfamfam which is the zip file from http://www.famfamfam.com/lab/icons/silk/famfamfam_silk_icons_v013.zip -->
<style>
td.details-control {
background: url('{!URLFOR($Resource.famfamfam_silk_icons,'icons/add.png')}') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('{!URLFOR($Resource.famfamfam_silk_icons,'icons/delete.png')}') no-repeat center center;
}
</style>
<!-- No need for a controller here! We can use Remote Objects. -->
<apex:remoteObjects >
<apex:remoteObjectModel name="Account" fields="Name,Phone" />
<apex:remoteObjectModel name="Contact" fields="Name,LastName,Phone,AccountId" />
</apex:remoteObjects>
<script>
j$ = jQuery.noConflict();
j$(document).ready( function () {
var acctTable = j$('[id$="accounttable"]').DataTable( {
// Use the Remote Object retrieve method to get a list of accounts
"ajax": function(data, callback, settings) {
var acct = new SObjectModel.Account();
acct.retrieve({orderby: [{Name: 'ASC'}], limit: 100}, function(err, records){
if(err) alert(err.message);
else {
callback({'data': records});
};
});
},
// Specify our columns. The first column is used to control expanding and collapsing to see contacts.
"columns": [
{ "class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
width: "8%" },
{ "data": "_props.Name",
"defaultContent": '' },
{ "data": "_props.Phone",
"defaultContent": '' }
],
order: [[1, 'asc']],
} );
// This is used to watch for clicks to expand and collapse the rows.
j$('#accounttable tbody').on('click', 'td.details-control', function () {
var tr = j$(this).closest('tr');
var row = acctTable.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
formatContacts(row.data(), function(childData) {
row.child( childData ).show();
tr.addClass('shown');
});
}
} );
// Each time a row is clicked to expand, we need to query for a list of contacts for that account and
// build a table that will display as a child to the row
function formatContacts(d, callback) {
var contact = new SObjectModel.Contact();
contact.retrieve({ where: {AccountId: {eq: d.get('Id')}}, orderby: [{LastName: 'ASC'}], limit: 100}, function(err, records){
if(err) alert(err.message);
else {
var table = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<thead><tr><th>Name</th><th>Phone</th></tr></thead><tbody>';
records.forEach(function (record){
table = table + '<tr><td>' + record.get('Name') + '</td><td>' + record.get('Phone') + '</td></tr>';
});
table = table + '</tbody></table>';
callback(table);
};
});
}
} );
</script>
</head>
<body>
<table id="accounttable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th/>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
</table>
</body>
</apex:page>
Posted in: Jquery Data tables in Visualforce pages,Pagenation in visualforce page,Visualforce best practices.,Visualforce examples
3 comments:
Thanks! It worked perfectly for me.
excellent..
i am a freelancer and work according to contract, for more details contact us with the information provided below.
play game and win snapdeal lucky draw coupon 2019. contact us, play and win snapdeal lucky draw winner prizes.
lucky draw snapdeal contact number 6289379055 call to get more information
Lucky Draw Snapdeal costomer care number
snapdeal lucky draw contact number
snapdeal lucky draw contest 2019
snapdeal lucky draw 2019 list
snapdeal lucky draw contact number
snapdeal lucky draw 2019
Best Regards
snapdeal lucky draw winners 2019
Post a Comment