Friday, 3 January 2014

Javascript Data Table in Salesforce

Salesforce provides its own datatables attributes to show your data on visualforce pages, but its kind of slow and requires heavy coding to add Sorting and Paging things on it.
So if we try for javascript for this purpose, its so easy and fast on the UI.

Here I have created a Generic Component where, developer just need to pass the name of the list(having records of an Object), with Name of the headers of the list. and that component will do everything to show a multifunctional table on the page.

And then table will look something like below, having records of Account object.


You can check the functionality of the above table on this link Javascript Datatable

Here is the Visualforce page using a Component.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<apex:page Controller="JQDatable">

  <!-- Calling component having list and Header of the table -->
  <c:DataTableComponent listOfRecords="{!accounts}" fieldHeader="Name,Phone,AccountNumber,Type,Owner.Name" />
</apex:page>

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Developer just need to pass the name of the List with correspinding name of the fields here is the Controller class of the above pages

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
public with sharing class JQDatable {

  //List of Account
  public List<Account> getAccounts() {
     return [SELECT Id, Name, Phone, AccountNumber, Type, Owner.Name FROM Account];
   }
}

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

All this simple code showing such functionality becuase of the component, refer these below links to have the Component as well as Jquery and CSS files that have been used.

Here is Component and its Controller
Datable Component Controller
Datatable Component

Jquery and Css files used in Static resource()
jquery.js
jquery.dataTables.js
Demo_table.css

After saving all above, you can have a Generic Component to show a multi-functional Data table in salesforce.

Happy Coding...CHEERSSS..!!!!