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


Untuk pemesanan, hubungi kami melalui kontak yang tersedia berikut:

Chat WhatsApp Kirim SMS Telpon

Komentar (0)

Posting Komentar