DataTables in Visualforce Part 1

Introduction

One day a client asked us to display the Opportunities of an Account. We thought a nice Visualforce PageBlockTable would do the job. Then the client added functionalities like:

• Pagination (as there would be around 100 records),
• Sorting of columns,
• Filtering of opportunities.

Instead of scratching our head thinking how to do this in Visualforce, we laughed out loud and told the client that the solution will be available in 5 minutes :)

DataTables our Saviour

DataTables is a jQuery plugin which we will use to make the dream of our client come true. DataTables focuses on enhancing the user-experience on standard HTML tables.

Code

Below is a small code used to generate our table of Opportunities. Notice how we import our scripts and css for DataTables; you should normally put them in a Static Resource. At line 15, we called the dataTable function to initialise our table.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<apex:page standardController="Account"> <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / > <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" /> <apex:dataTable value="{!Account.Opportunities}" var="opp" styleClass="opp-table"> <apex:column value="{!opp.Name}" headerValue="Name"/> <apex:column value="{!opp.StageName}" headerValue="Stage"/> <apex:column value="{!opp.Amount}" headerValue="Amount"/> <apex:column value="{!opp.CloseDate}" headerValue="Close Date"/> </apex:dataTable> <script> $(function(){ $('table.opp-table').dataTable(); }); </script> </apex:page>

Result

1. Pagination controls
2. Pagination size controls
3. Sorting by clicking on column header. (currently sorted on Amount)
4. Instant filtering capability over whole table.

Final words

This is a basic example of using DataTables in Visualforce. Part 2 coming soon...

Cheers & Happy Coding !!

Gulshan.

Apex Map into JSON for use in Javascript / jQuery

Introduction

Ever wondered how to use your apex map into javascript / jQuery for your VisualForce development?
Please find below a way to do it.

Note: jQuery is required in this tutorial.

Apex Class (Visualforce Controller)

Suppose we populate a map with key Id and value as a list of Ids, say mapParentIdListChildrenId in our controller.
We then declare a getter to access this map as JSON in our VF page.

 public Map <Id, List <Id>> mapParentIdListChildrenId{get;set;}
 public String mapParentChildrenJSON {get{return JSON.serialize(mapParentIdListChildrenId);}}

Visualforce Page

The JSON String mapParentChildrenJSON is converted into javascript object as shown below:

 <script> 
  $(function() {
     var $mapParentChildren = jQuery.parseJSON('{!JSENCODE(mapParentChildrenJSON)}');
     console.log($mapParentChildren);
     // var value = $mapParentChildren[key]; // can be used to access values of the map
  }
 </script>

Use the Console of your browser to inspect the elements in your map ;)

Cheers & Happy Coding !!
Gulshan.