You need to sign in to do that
Don't have an account?
Geetha sai Display records by using JQuery
How to display all records which are available in custom object by using jquery plugin
Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
Geetha sai
There are few steps u need to follow
Below is the link which will clearly explain you.
http://developer.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page
Please let us know if this helps you.
Thanks and Regards
sandhya
Please use the below code.
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;
}
}
VF 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({
order: [[2, 'asc']],
initComplete: function() {
var api = this.api();
var select = j$('[id$=accountSelect]');
api.column(0).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
}
});
j$('[id$=accountSelect]').change(function() {
var val = j$.fn.dataTable.util.escapeRegex(
j$(this).val()
);
contactTable.column(0)
.search( val == 'All' ? '' : '^'+val+'$', true, false )
.draw();
});
});
</script>
</head>
<body>
<select id="accountSelect"><option value="All"></option></select>
<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>
To make your dataTable responsive, you have to include following supporting CSS and Javascript in the visualforce page
<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" />
For more details, please visit: https://www.datatables.net/examples/styling/display.html.
Please mark it as best answer if it helps you.
Thank You.
can you please add there date range filter using jQuery to display the data table record?