Listing Account object data using jquery dataTable

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>