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
