Sunday, April 3, 2016

Jquery Data tables in Visualforce pages.

Jquery Data tables in Visualforce pages.


Examples 1:

Hi, In this post i am giving basic example of Jquery Data tables using in visualforce. It will give you the pagination ans search functionality in visualforce page.


Controller Class:

public class DataTableExampleController {
    public List<Contact> contactList {
        get {
            if (contactList == null) {
                contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 10000];
            }
            return contactList;
        }
        set;
    }

}


Visualforce Page:

<apex:page Controller="DataTableExampleController" readOnly="true">
    <head>
        <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" />
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="contacttable"]').DataTable({
                    
                });
            });
        </script>
    </head>
    <body>
        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!contactList}" var="contact">
                    <tr>
                        <td>{!contact.Account.Name}</td>
                        <td>{!contact.FirstName}</td>
                        <td>{!contact.LastName}</td>
                        <td>{!contact.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>

</apex:page>







Example 2:



<apex:page >
    
 <head>

    <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" />

    <!-- I have a static resource called famfamfam which is the zip file from http://www.famfamfam.com/lab/icons/silk/famfamfam_silk_icons_v013.zip -->
    <style>
    td.details-control {
        background: url('{!URLFOR($Resource.famfamfam_silk_icons,'icons/add.png')}') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('{!URLFOR($Resource.famfamfam_silk_icons,'icons/delete.png')}') no-repeat center center;
    }
    </style>

    <!-- No need for a controller here! We can use Remote Objects. -->
    <apex:remoteObjects >
        <apex:remoteObjectModel name="Account" fields="Name,Phone" />
        <apex:remoteObjectModel name="Contact" fields="Name,LastName,Phone,AccountId" />
    </apex:remoteObjects>

    <script>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var acctTable = j$('[id$="accounttable"]').DataTable( {
                // Use the Remote Object retrieve method to get a list of accounts
                "ajax": function(data, callback, settings) {
                    var acct = new SObjectModel.Account();
                    acct.retrieve({orderby: [{Name: 'ASC'}], limit: 100}, function(err, records){
                        if(err) alert(err.message);
                        else {
                            callback({'data': records});
                        };
                    });
                },
                // Specify our columns. The first column is used to control expanding and collapsing to see contacts.
                "columns": [
                    { "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        width: "8%" },
                    { "data": "_props.Name",
                        "defaultContent": '' },
                    { "data": "_props.Phone",
                        "defaultContent": '' }
                ],
                order: [[1, 'asc']],
            } );

            // This is used to watch for clicks to expand and collapse the rows.
            j$('#accounttable tbody').on('click', 'td.details-control', function () {
                var tr = j$(this).closest('tr');
                var row = acctTable.row( tr );
         
                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    formatContacts(row.data(), function(childData) {
                        row.child( childData ).show();
                        tr.addClass('shown');
                    });
                }
            } );

            // Each time a row is clicked to expand, we need to query for a list of contacts for that account and 
            // build a table that will display as a child to the row
            function formatContacts(d, callback) {
                var contact = new SObjectModel.Contact();
                contact.retrieve({ where: {AccountId: {eq: d.get('Id')}}, orderby: [{LastName: 'ASC'}], limit: 100}, function(err, records){
                    if(err) alert(err.message);
                    else {
                        var table = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                                        '<thead><tr><th>Name</th><th>Phone</th></tr></thead><tbody>';
                        records.forEach(function (record){
                            table = table + '<tr><td>' + record.get('Name') + '</td><td>' + record.get('Phone') + '</td></tr>';
                        });
                        table = table + '</tbody></table>';
                        callback(table);
                    };
                });
            }

        } );
    </script>
    </head>
    
    <body>
    <table id="accounttable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th/>
                <th>Name</th>
                <th>Phone</th>
            </tr>
        </thead>
     </table>
     </body>
</apex:page>






1 comments:

Post a Comment

 
| ,