You need to sign in to do that
Don't have an account?
![Geetha sai Geetha sai](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
Display records by using JQuery
How to display all records which are available in custom object by using jquery plugin
function readOnly(count){ }
You need to sign in to do that
Don't have an account?
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?