Code to list the data from Account object using jquery dataTable
Apex Class:
public class TableDataController {
public List<Account> getMyAccounts() {
return [SELECT Id, Name, AccountNumber, Type FROM Account];
}
}
VI Page:
<apex:page standardStylesheets=”false” showHeader=”false” sidebar=”false” controller=”TableDataController”>
<apex:stylesheet value=”{!URLFOR($Resource.dataTable, ‘dataTable/css/demo_page.css’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.dataTable, ‘dataTable/css/demo_table.css’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.dataTable, ‘dataTable/js/jquery.js’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.dataTable, ‘dataTable/js/jquery.dataTables.js’)}”/>
<head>
<script type=”text/javascript” charset=”utf-8″>
$(document).ready( function () {
var oTable = $(‘#example’).dataTable();
var keys = new KeyTable( {
“table”: document.getElementById(‘example’),
“datatable”: oTable
} );
} );
</script>
</head>
<h4>Acount List</h4>
<apex:pageBlock >
<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display KeyTable” id=”example”>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Account Number</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<apex:repeat value=”{!MyAccounts}” var=”acc”>
<tr>
<td>{!acc.Id}</td>
<td>{!acc.Name}</td>
<td>{!acc.AccountNumber}</td>
<td>{!acc.Type}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:pageBlock>
</apex:page>