Dynamic DataTables with jQuery and Visualforce

Dynamic DataTables with jQuery and Visualforce

By On January 13, 2012 · 11 Comments

Create sortable, filterable, searchable, and paginated data tables using jQuery, DataTables jQuery plugin, and Visualforce.

Very excited to share this with the world! This post will get updated soon with step by step details, for those devs that want to figure it out for themselves, source code is right here on this page with a link to a live demo on my developer edition org site as well as a link to download the static resource used in the example. Enjoy!

Live Demo on my Salesforce.com Developer Site

Download the Static Resource Used in this Example

Source Code

Controller
Apex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class DataTableExampleController {
    
    public ApexPages.StandardSetController contactSet {
        get {
    if(contactSet == null) {
    contactSet = new         
                ApexPages.StandardSetController(Database.getQueryLocator(
[SELECT Name, Phone, Email, Title, Account.Name FROM Contact]));
}
return contactSet;
}
set;
}
public List<contact> getContacts() {
return (List<contact>) contactSet.getRecords();
}
}

Important! Make sure your SOQL query includes all the fields you need for the datatable.

Page
Visualforce
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<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>
        <h2>Contact Search Demo with jQuery, DataTables, and Visualforce"</h2>
        <h3>Try out the keyword search, show/hide columns, sort, and pagination!</h3>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="contacttable" style="margin-top:20px;">
            <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>
 
If you enjoyed this article, please consider sharing it!
Reddit Facebook Twitter Delicious StumbleUpon Digg
  • Sandeep Das

    Hi ,
     The application is awesome.
     I went through the code but I didn’t understand anything . Can u help me understanding ??
    Thanks
    Sandeep

    • http://macscloud.com/ Mac Anderson

      Sandeep, I would do anything for a fellow Wiproite! : > ) I will reach out to you directly via your wipro email id so that we can set up some time to discuss. Cheers!

  • andrew

    This is awesome. But a random question. If this site is all native force.com how were you able to share the code on the pages? Any help would be appreciated. 

    • http://macscloud.com/ Mac Anderson

      The pages in the code example section are hosted by my dev edition (note the url) the pages that have my posts/source code are hosted on my server. Does that answer your question?
      Mac

  • http://twitter.com/reetan_adc Reetan

    Hi Mac,
    This Application is awesome,
    for this application i am trying to my own page, but CSS files are not working, which is not availble in the .ZIP folder.
    Could you pls share me the .css files.

    pls mail me into: reetan.adc@gmail.com

    Thanks in Advance
    Reetan

  • Sunny Sharma

    I have a similar requirement. however the difference is that we are displaying Account Name as column values having hyperlink for the Account detail page. So now when I sort the column, it sorts the table based on Account Id and not Account Name. Any suggestions of having sorting based on Account Name and keeping Account link intact.
    Thanks

  • ram

    Can you provide CSS please.

  • Klaus Schmetkamp

    How can I install this in an enterprise edition?

  • Klaus Schmetkamp

    How can I upload the Apex Class to an enterprise edition ?
    How do I upload the media folder? Thanx

  • Kotir1

    hi this is koti i want some code how  to display hide button and show button in salesforce  write the code plz send 

  • Klaus

    Excellent tool! I used it for a custom object and works perfectly!
    Is there a way to take out the 20 records limit?

    Tanx !