Keyword Search Series - Display data using Visualforce and Datatable

Use Case

User wants to display Case data based on Account and wants to perform keyword search on the dataset in the table. It should also highlight the search input in the match records.

Solution

This can be easily be achieved with the use of jQuery datatable with visualforce page.

Visualforce

1:  <apex:page controller="AdvancedKeywordSearchController">  
2:    <apex:form>  
3:      <!-- Jquery -->  
4:      <apex:includeScript value="//code.jquery.com/jquery-1.11.3.min.js" />  
5:      <apex:stylesheet value="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />  
6:      <!-- DataTable -->  
7:      <apex:includeScript value="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" />  
8:      <apex:stylesheet value="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />  
9:      <!-- Search Highlight -->  
10:      <apex:includeScript value="//bartaz.github.io/sandbox.js/jquery.highlight.js" />  
11:      <apex:includeScript value="//cdn.datatables.net/plug-ins/1.10.9/features/searchHighlight/dataTables.searchHighlight.min.js" />  
12:      <apex:stylesheet value="//cdn.datatables.net/plug-ins/1.10.9/features/searchHighlight/dataTables.searchHighlight.css" />  
13:      <style>  
14:        .filterMatches {  
15:          background-color: #BFFF00;  
16:        }  
17:        .tertiaryPalette {  
18:          color: #000 !important;  
19:        }  
20:        .dt-buttons {  
21:          margin-left: 10px;  
22:        }  
23:      </style>  
24:      <script type="text/javascript">  
25:        $(document).ready(function() {  
26:          var casesTable = $('[cid$="casesTable"]').parent(  
27:            'table').eq(0).DataTable({  
28:            //enables results highlight  
29:            searchHighlight: true,  
30:            //sets record lengths to show in picklist  
31:            aLengthMenu: [  
32:              [10, 25, 50, 100, 200, -1],  
33:              [10, 25, 50, 100, 200, "All"]  
34:            ],  
35:            "iDisplayLength": 10,  
36:            //adds copy, print buttons...  
37:            dom: 'lBrtip', //l=length, B=buttons, f=filter(search), r=processing, t=the table, I=table summary, p=page controls  
38:            buttons: [],  
39:          });  
40:          $('#table1').dataTable({  
41:            "bPaginate": false,  
42:          });  
43:          var oTable0 = $("#table1").dataTable();  
44:          $("#Search_All").keyup(function() {  
45:            // Filter on the column (the index) of this element  
46:            oTable0.fnFilterAll(this.value);  
47:          });  
48:        });  
49:        $.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput,  
50:          iColumn, bRegex, bSmart) {  
51:          var settings = $.fn.dataTableSettings;  
52:          for (var i = 0; i < settings.length; i++) {  
53:            settings[i].oInstance.fnFilter(sInput, iColumn, bRegex,  
54:              bSmart);  
55:          }  
56:        };  
57:      </script>  
58:      <apex:pageBlock id="header">  
59:        <apex:outputLabel value="Advanced Search of Case by Account: {!accountObj.Name}" style="font-size:medium; font-weight:bold;" /> <br /><br />  
60:        <label>Search:</label>  
61:        <input type="text" id="Search_All" placeholder="Enter Search Keyword" />  
62:        <apex:commandButton value="Cancel" action="{!cancel}" style="float: right;" />  
63:      </apex:pageBlock>  
64:      <apex:pageBlock title="Cases" id="cases">  
65:        <apex:pageblockTable value="{!caseList}" var="case" html-cid="casesTable" id="table1">  
66:          <apex:column headerValue="Case Number">  
67:            <apex:outputLink value="/{!case.id}">{!case.CaseNumber} </apex:outputLink>  
68:          </apex:column>  
69:          <apex:column value="{!case.Subject}" headerValue="Subject" />  
70:          <apex:column value="{!case.Description}" headerValue="Description" />  
71:        </apex:pageblockTable>  
72:      </apex:pageBlock>  
73:      <apex:commandButton value="Cancel" action="{!cancel}" style="float: right;" />  
74:    </apex:form>  
75:  </apex:page>  

Apex Controller

During loading of the screen, it will take id parameter and execute an SOQL query and creates a list of records.

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

/* * Created By: Santanu Boral * Purpose: This class is used by AdvancedKeywordSearchPage * -------------------------------------------------------------------------- */ public with sharing class AdvancedKeywordSearchController { public List<Case> caseList {get;set;} public String accountId {get;set;} public Account accountObj {get;set;} public AdvancedKeywordSearchController() { accountId = ApexPages.CurrentPage().getParameters().get('id'); accountObj = [SELECT Name FROM Account WHERE Id =:accountId]; /* - Query to fetch all the cases related to current Account */ caseList = [SELECT CaseNumber, Subject, Description FROM Case WHERE AccountId =:accountId ORDER BY CaseNumber DESC]; } public PageReference cancel() { PageReference pRef = (new ApexPages.StandardController (new Account(Id=accountId))).cancel(); pRef.setRedirect(true); return pRef; } }

This visualforce page can be called from a Detail Page button. The code behind the button will be

/apex/AdvancedKeywordSearchController?id=<accountId>

Results

Related Post

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

Further Reading

Keyword Search Series - Display data using Visualforce and Datatable using sever side ajax