+ Start a Discussion
❤Code❤Code 

DataTables Table jQuery

Hi All,

I was going through the site http://www.datatables.net/.There is an example which is shown in the site.
User-added image

When this particular example is seen in TAB or mobile the columns are sorted out like below - 
User-added image

Can anyone help me out how this can be achieved in visualforce page. 
 
Best Answer chosen by ❤Code
KaranrajKaranraj
To make your dataTable responsive, you have to include following supporting CSS and Javascript in the visualforce page

//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css
//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js
//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js

You can find the complete supporting files for the DataTables in this link - http://www.datatables.net/download/index

Thanks,
http://karanrajs.com

All Answers

sandeep sankhlasandeep sankhla
Hi sfdc,

Yes, this we can achieve, you can use bootstrap and there are too many ways where you can decide if page opened in mobile or tab then only 4 columns should be visible else 7 or like that..



Thanks,
Sandeep
❤Code❤Code
Hi Sandeep,

Can u please check the above site and suggest how to proceed. 

Regards
sandeep sankhlasandeep sankhla
Hi SFDC, 

Just to confirm, you want to use this plugin from site in your vf page or you need same kind of behaviour in our Vf page..here same behaviour means you already have your vf page which is also showing somedata from table and there columns you want to sort based on device?

Thanks,
Sandeep
❤Code❤Code
Hi Sandeep,

I have my vf page where i have implemented datatable jQuery. But i am not getting the "plus" symbol when i am checking in mobile or TAB.

Regards
❤Code❤Code
Hi Karanraj,

Thanks for the reply. I implemented ur example. When i m checking in mobile or TAB i am not getting the "plus" symbol as i have shown it in the above image.

Column are not getting wrapped.
Can u please check.

Regards
KaranrajKaranraj
To make your dataTable responsive, you have to include following supporting CSS and Javascript in the visualforce page

//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css
//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js
//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js

You can find the complete supporting files for the DataTables in this link - http://www.datatables.net/download/index

Thanks,
http://karanrajs.com
This was selected as the best answer
sandeep sankhlasandeep sankhla
Hi sfdc,

make sure you have included all necessary fiels from site related to css and js ..then only it will work.

Thanks,
Sandeep
❤Code❤Code
Hi Karan,

I used the above the js and css , but still i am not able to wrap it.

Regards
❤Code❤Code
Thanks Karan.. its working now. The magic is in the jQuery.. I will post the jquery shortly..
Salesforce2015Salesforce2015
Hi SFDC,

Please post your jquery.
Sai Ram ASai Ram A
Hello Maruf baghwan

I am able to Build the JSON Structure Sucessfully But, i am unable to communicate the same in Visualforce page, Please suggest
<apex:page controller="JSONGeneratorController"  docType="HTML-5.0" >
   
    <apex:stylesheet value="{!URLFOR($Resource.JQueryDataTable, '/css/jquery.dataTables.css')}"/> 
    <!-- jQuery library -->
    <apex:includeScript value="{!URLFOR($Resource.JQueryDataTable, '/jquery.dataTables.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQueryDataTable, '/jquery-1.11.1.min.js')}"/> 
    
    <script>
        /* Formatting function for row details - modify as you need */
        function format ( d ) {
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                '<tr>'+
                    '<td>Account Type:</td>'+
                    '<td>'+d.acctType+'</td>'+
                '</tr>'+
                '<tr>'+
                    '<td>Revenue:</td>'+
                    '<td>'+d.revenue+'</td>'+
                '</tr>'+
                '<tr>'+
                    '<td>Extra info:</td>'+
                    '<td>And any further details here (images etc)...</td>'+
                '</tr>'+
            '</table>';
        }
        
        function buildAccountsTable(){  
        
        var j$ = jQuery.noConflict();
        
          var allAccounts = {!jsonDataAllAccounts};  
          //console.log("My name is %s and I am %d years old. My favorite color is %s. I live for JavaScript. So sad.", name, owner, rating, acctType, revenue, numberOfEmployees);
            
          $(document).ready(function() {
          alert("2");
            var table = $('#example').DataTable( {
                "ajax": allAccounts ,
                "columns": [
                    {
                        "className":      'details-control',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    { "data": "name" },
                    { "data": "industry" },
                    { "data": "owner" },
                    { "data": "rating" }
                    //{ "data": "acctType" },
                    //{ "data": "revenue" },
                    { "data": "numberOfEmployees" }
                    
                ],
                "order": [[1, 'asc']]
            } );
          
          // Add event listener for opening and closing details
            $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );
            
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
            } );
            } );
     }  
    </script>
<apex:form >

   <apex:outputPanel id="allAccountTables">  
      <table id="allAccounts" class="display" cellspacing="0" style="width:90%; padding-bottom:10px; border-style:solid;">  
           <thead>  
                <tr>  
                     <th style="width: 25%;">Name</th>  
                     <th>Industry</th>  
                     <th>Owner</th>  
                     <th style="width: 13%;">Rating</th>  
                     <th>Type</th>  
                     <th>AnnualRevenue</th>  
                     <th>NumberOfEmployees</th>  
                </tr>  
           </thead>  
      </table>  
 </apex:outputPanel> 
 
       
    <apex:pageBlock >
    {!jsonDataAllAccounts}
    </apex:pageBlock>
    
  </apex:form>
</apex:page>

Class is
public with sharing class JSONGeneratorController {

    public String jsonString { get; set; }
    public List<Account> accontList {get; set;}
    //define shape of Json Response salesforce
    public JSONGeneratorController (){
        jsonString = Json.SerializePretty(getAccountList());
        system.debug(jsonString);
    }
    
    public static List<Account> getAccountList(){
        return ([SELECT Id, Name, OwnerId, Owner.Name, Ownership, Industry, AnnualRevenue,  Type, Rating, NumberOfEmployees, (SELECT FirstName, LastName FROM Contacts WHERE AccountId != null) FROM Account ORDER BY Name ASC LIMIT 10]);
        //return ([SELECT Id, Name,Phone,  OwnerId, Owner.Name, Ownership, Industry, AnnualRevenue,  Type, Rating, NumberOfEmployees FROM Account ORDER BY Name ASC LIMIT 10]);
    }
    
    public class DataTableRow {  
      public String name { get; set; }  
      public String industry { get; set; }  
      public String owner { get; set; }  
      public String rating { get; set; }  
      public String ratingFlag { get; set; }  
      public Decimal revenue { get; set; }  
      public String revenueFlag { get; set; }  
      public String acctType { get; set; }  
      public Integer numberOfEmployees { get; set; }  
      public Id recordId { get; set; }  
    
      public DataTableRow(Account acct){  
           this.name = acct.Name;  
           this.industry = acct.Industry;  
           this.owner = acct.Owner.Name;  
           this.rating = acct.Rating;  
           this.revenue = acct.AnnualRevenue;  
           this.acctType = acct.Type;  
           this.numberOfEmployees = acct.NumberOfEmployees;  
           this.recordId = acct.Id;  
      }  
    }
    
    public String jsonDataAllAccounts {  
      get {  
           List<DataTableRow> dataRows = new List<DataTableRow>();  
           if(jsonDataAllAccounts == null){  
                for(Account acct : [SELECT Id, Name, OwnerId, Owner.Name, Ownership, Industry, AnnualRevenue,  Type, Rating, NumberOfEmployees FROM Account ORDER BY Name ASC LIMIT 10]){  
                     dataRows.add(new DataTableRow(acct));  
                }  
           }  
           jsonDataAllAccounts = JSON.serializepretty(dataRows);  
           system.debug('get set variable'+jsonDataAllAccounts);
           return jsonDataAllAccounts;   
      }  
      private set;  
    }  
    
    
    
}

Thank you in Advance
- Sai