Pages

▼

Wednesday, December 20, 2017

Visualforce with JQuery Datatable for sorting, pagination and handling 10000 records

Use Case


 Sometimes we get a requirement to display tabular data in visualforce which will have following features:


  • Data will be displayed in paginated way.
  • Column headers must be sortable
  • Keyword search in the list itself.
  • More over if we want to display 10000 records in the list.

Solution

We can leverage JQuery datatable library to achieve those functionalities.

Controller



 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
public with sharing class SortWrapper 
{

    public List<ContactInfoWrapper> ContactsWrapper {get; set;}    
    //added for paginnation
    public List<List<ContactInfoWrapper>> listofContactsWrapper {get; set;}
    
    public SortWrapper()
    {
  ContactsWrapper = new List<ContactInfoWrapper>();
  listofContactsWrapper = new List<List<ContactInfoWrapper>>();
        getContacts();
    } 
     
    public void getContacts()   
    {
        for(Contact s:[SELECT Id, Name, Email, Phone, Account.Name FROM Contact])
        {            
            ContactsWrapper.add(new ContactInfoWrapper(s)); 
            if(ContactsWrapper.size() == 999)
   {
    listofContactsWrapper.add(ContactsWrapper);
    ContactsWrapper= new List<ContactInfoWrapper>();
            }                
        } 
        if(ContactsWrapper.size() != 0){
   listofContactsWrapper.add(ContactsWrapper);
     }   
        
    }
    
 //Wrapper class
    public class ContactInfoWrapper
    {
        public Contact sObj{get;set;}
        public Boolean checked {get;set;}
        public ContactInfoWrapper(Contact con)
        {
            sObj = con;  
            checked=false;  
        } 
    }
}

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
<apex:page id="SortPage" controller="SortWrapper"  showHeader="false">
    <!--added for pagination-->
       <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>
   <!---End of Pagination--->
   
    <apex:form id="myForm">
   
        <apex:sectionHeader title="Contact"/><br/>
        
        <apex:pageBlock>
            
            <apex:pageBlockSection title="Contact Records" collapsible="false" columns="1"/>
            <br></br>
            <body>                
                <table id="contacttable" class="display">       
                    <thead>
                        <tr>
                            <th style="width:10%;">Select</th>
                            <th style="width:25%;">Name</th>
                            <th style="width:30%;">Account Name</th>                                
                        </tr>
                    </thead>
                    <tbody>
                        <apex:repeat value="{!listofContactsWrapper}" var="contactinfowrp" id="tableInd">
                              <apex:repeat value="{!contactinfowrp}" var="con">
                               <tr >
                                  <td><apex:inputCheckbox value="{!con.checked}"/></td>
                                  <td>{!con.sObj.Name}</td>
                                  <td>{!con.sObj.Account.Name}</td>
                              </tr>
                            </apex:repeat>
                        </apex:repeat>
                    </tbody>
                </table>
            </body>
        </apex:pageBlock>  
    </apex:form>
</apex:page>

Outcome


at

1 comment: