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..!!!!

12 comments:

  1. This is outstanding. I would love to see an additional feature here.
    1. Your header is showing Owner.Name, would be better if you display Owner only there.
    2. Your filters are in table footer. Would be much better if you put it on top as table header.

    ReplyDelete
  2. Is there a way to render the API fields in the header? Thanks!

    ReplyDelete
    Replies
    1. Yes absolutely...give me your email id, I'll send you the code..!!!

      Delete
    2. Hi Abhi,I tried the above code in my page,,,its not working,,,i am able to display records but sorting and pagination styles are not added to the table..could you please help me out this,,,I have to use this code in my application to display large amount data,,,,

      Delete
    3. Bhaskar,
      Please use the static resource files, as in there format, these files are applying paging and searching functionality, there must be some problem in the static resource files.

      Delete
  3. HI, How would you write a test class for that controller?

    ReplyDelete
    Replies
    1. Its a page only, no need to write test class for that and the controller I am using Its just a query.

      Delete
  4. I must say that this code is wonderful.Great work Abhi bhai.

    ReplyDelete
  5. Plz send me the Demo_page.css and Demo_table.css as I don't see any download link for it.

    ReplyDelete
  6. Hi Abhi. I don't need css now.I have managed css of my own. I have a question.My requirement is like "Account no" in the table should be a command link.Its easy to make all columns as command link but how we will make only one column as command link. Any idea or suggestion??

    ReplyDelete
    Replies
    1. Hi Ajit,
      You can create hyperlink in Apex class, by checking the Label if its Account pass the Id in the apex class loop. then the header will be hyperlink, creation of hyperlink in Apex is a bit complex.

      Delete
    2. Thnx Abhi. I am able to create hyperlink now :) by small modification in the component code(by label check as suggested by you
      Now i will have to try to pass the id of the selected link to apex class.I will try it on monday and will see whether i can accomplish or not. Thanks a lot for your reply.

      Delete