This is a common requirement for any salesforce developer sorting data table .It is good to practice by uploading script in static resource as a zip format and access using visualforce page as follows
Custom controller is always a best practice for a developer
public class DataTableExampleController {
// ApexPages.StandardSetController must be instantiated
// for standard list controllers
public ApexPages.StandardSetController setCon {
get {
if(setCon == null) {
setCon = new ApexPages.StandardSetController(Database.getQueryLocator(
[select name,phone,email,account.name,title from contact]));
}
return setCon;
}
set;
}
// Initialize setCon and return a list of records
public List<Contact> getcontacts() {
return (List<contact>) setCon.getRecords();
}
}
and the Visualforce page as
<apex:page Controller="DataTableExampleController" docType="html-5.0">
<head>
<apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"/>
<style type="text/css" title="currentStyle">
@import "{!URLFOR($Resource.DataTables, 'media/css/demo_page.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/demo_table.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/ColReorder.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/ColVis.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/TableTools.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/ColumnFilterWidgets.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/demo_table_jui.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css')}";
</style>
<script src="{!URLFOR($Resource.DataTables, 'media/js/jquery.dataTables.min.js')}"></script>
<script src="{!URLFOR($Resource.DataTables, 'media/js/jquery.dataTables.js')}"></script>
<script src="{!URLFOR($Resource.DataTables, 'media/js/ColVis.js')}"></script>
<script src="{!URLFOR($Resource.DataTables, 'media/js/ZeroClipboard.js')}"></script>
<script src="{!URLFOR($Resource.DataTables, 'media/js/TableTools.js')}"></script>
<script src="{!URLFOR($Resource.DataTables, 'media/js/ColumnFilterWidgets.js')}"></script>
<script type="text/javascript" charset="UTF-8">
$(document).ready( function () {
var oTable = $('#contacttable').dataTable( {
"sDom": 'WRC<"clear">lftip',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
"oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
});
});
</script>
</head>
<body>
<table cellpadding="10" cellspacing="0" border="5" class="display" id="contacttable" style="margin-top:25px;">
<thead>
<tr>
<th>Name</th>
<th>Account</th>
<th>Title</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Account</th>
<th>Title</th>
<th>Phone</th>
<th>Email</th>
</tr>
</tfoot>
<tbody>
<apex:repeat value="{!Contacts}" var="c">
<tr>
<td>{!c.Name}</td>
<td>{!c.Account.Name}</td>
<td>{!c.Title}</td>
<td>{!c.Phone}</td>
<td>{!c.Email}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</body>
</apex:page>
Download Your Static Resource at
DataTables
Here is some screen shots
No comments:
Post a Comment