function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vincent van Drunen LittelVincent van Drunen Littel 

Create a simple searchbox in VisualForcePage

I would like to create a simple searchbox within my visualforce page.

Could anyone help with this?
Best Answer chosen by Vincent van Drunen Littel
Amit Chaudhary 8Amit Chaudhary 8
Please check below blog 

http://amitsalesforce.blogspot.in/2015/04/pagination-using-standardsetcontroller.html

Page:-
<apex:page controller="CustomPaginationController" sidebar="false">
    <apex:form >
        <apex:pageBlock >
            <apex:pageMessages ></apex:pageMessages>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Search}" value="Search" />
            </apex:pageBlockButtons>
            
            <apex:pageblockSection >
                <apex:inputText value="{!acc.Name}" label="Name"/> 
                <apex:inputText value="{!acc.Phone}" label="Phone" />
            </apex:pageblockSection>
        </apex:pageBlock>
        <apex:pageBlock id="resultId" rendered="{!if(lstAccount != null && lstAccount.size > 0, true,false )}">
            <apex:pageBlockButtons >
                <div style="text-align:right"> 
                  Total Records Found: {!Con.resultSize}  
      <apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>  
      <apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>  
      <apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>  
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>           
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>           
      <apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>&nbsp;  
      <apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>  
      <apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/> 
      <img src="/s.gif" title="Last Page" alt="Last Page" class="last"/>         
                </div>
            </apex:pageBlockButtons>                
            <apex:pageBlockSection columns="1">
                <apex:pageBlockTable value="{!lstAccount}" var="acc" >
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.Phone}"/>
                </apex:PageblockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Class:-
public with sharing class CustomPaginationController 
{
    public Account acc {get;set;}   
    public ApexPages.StandardSetController con{get; set;} 
    public CustomPaginationController ()
    {
       acc = new Account();
       lstAccount = new List<Account>();
    }
    public List<Account> lstAccount 
    {  
        get  
        {  
            if(con != null)  
                return (List<Account>)con.getRecords();  
            else  
                return null ;  
        }  
        set;
    }  
    public PageReference Search()
    {
        String query= '';
        String strFilter = '';
        if(acc.Name != null && (acc.Name ).trim() !='')
        {
           strFilter  = strFilter  +  ' where Name Like \''+acc.Name+'%\'' ;
        }
        if(acc.Phone != null && (acc.Phone).trim() !='' )
        {
           if(strFilter == '')
           { 
               strFilter  = strFilter  +  ' where Phone like \''+acc.Phone+'%\'' ;
           }
           else
           {
               strFilter  = strFilter  +  ' And Phone like \''+acc.Phone+'%\'' ;
           }
        }
        if(strFilter != '')
        {
            query = 'Select name ,id, phone from Account '+strFilter+ ' limit 1000';
            System.debug('Query ---->'+ query );
            con = new ApexPages.StandardSetController(Database.getQueryLocator(query)); 
            con.setPageSize(2);
        }
        else
        {
        }
       return null;
    }
    public Boolean hasNext  
    {  
        get  
        {  
            return con.getHasNext();  
        }  
        set;  
    }  
    public Boolean hasPrevious  
    {  
        get  
        {  
            return con.getHasPrevious();  
        }  
        set;  
    }  
    public Integer pageNumber  
    {  
        get  
        {  
            return con.getPageNumber();  
        }  
        set;  
    }  
    public void previous()  
    {  
        con.previous();  
    }  
    public void next()  
    {  
        con.next();  
    }  
   
}

Please mark this as solution if this will help you

Thanks
Amit Chaudhary


 

All Answers

Arunkumar RArunkumar R
Hi Vincent,

Please find the below code,
 
public class SearchController
{
    public string searchKeyword{get; set;}
    public List<Account> accList{get; set;}
    
    public void doSearch()
    {
        accList = [SELECT Id, Name from Account WHERE Name like : searchKeyword+'%'];
    }
}
 
<apex:page controller="SearchController">

    <apex:form>
    <apex:outputText value="Enter value to search"/>
    <apex:inputText value="{!searchKeyWord}"/>
        <apex:commandButton value="Search" action="{!doSearch}" reRender="pbt"/>
    </apex:form>
    
    <apex:pageBlock title="Search Result" id="pbt">
        <apex:pageBlockTable value="{!accList}" var="acc">
            <apex:column value="{!acc.Name}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
    
</apex:page>
Amit Chaudhary 8Amit Chaudhary 8
Please check below blog 

http://amitsalesforce.blogspot.in/2015/04/pagination-using-standardsetcontroller.html

Page:-
<apex:page controller="CustomPaginationController" sidebar="false">
    <apex:form >
        <apex:pageBlock >
            <apex:pageMessages ></apex:pageMessages>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Search}" value="Search" />
            </apex:pageBlockButtons>
            
            <apex:pageblockSection >
                <apex:inputText value="{!acc.Name}" label="Name"/> 
                <apex:inputText value="{!acc.Phone}" label="Phone" />
            </apex:pageblockSection>
        </apex:pageBlock>
        <apex:pageBlock id="resultId" rendered="{!if(lstAccount != null && lstAccount.size > 0, true,false )}">
            <apex:pageBlockButtons >
                <div style="text-align:right"> 
                  Total Records Found: {!Con.resultSize}  
      <apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>  
      <apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>  
      <apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>  
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>           
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>           
      <apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>&nbsp;  
      <apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>  
      <apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/> 
      <img src="/s.gif" title="Last Page" alt="Last Page" class="last"/>         
                </div>
            </apex:pageBlockButtons>                
            <apex:pageBlockSection columns="1">
                <apex:pageBlockTable value="{!lstAccount}" var="acc" >
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.Phone}"/>
                </apex:PageblockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Class:-
public with sharing class CustomPaginationController 
{
    public Account acc {get;set;}   
    public ApexPages.StandardSetController con{get; set;} 
    public CustomPaginationController ()
    {
       acc = new Account();
       lstAccount = new List<Account>();
    }
    public List<Account> lstAccount 
    {  
        get  
        {  
            if(con != null)  
                return (List<Account>)con.getRecords();  
            else  
                return null ;  
        }  
        set;
    }  
    public PageReference Search()
    {
        String query= '';
        String strFilter = '';
        if(acc.Name != null && (acc.Name ).trim() !='')
        {
           strFilter  = strFilter  +  ' where Name Like \''+acc.Name+'%\'' ;
        }
        if(acc.Phone != null && (acc.Phone).trim() !='' )
        {
           if(strFilter == '')
           { 
               strFilter  = strFilter  +  ' where Phone like \''+acc.Phone+'%\'' ;
           }
           else
           {
               strFilter  = strFilter  +  ' And Phone like \''+acc.Phone+'%\'' ;
           }
        }
        if(strFilter != '')
        {
            query = 'Select name ,id, phone from Account '+strFilter+ ' limit 1000';
            System.debug('Query ---->'+ query );
            con = new ApexPages.StandardSetController(Database.getQueryLocator(query)); 
            con.setPageSize(2);
        }
        else
        {
        }
       return null;
    }
    public Boolean hasNext  
    {  
        get  
        {  
            return con.getHasNext();  
        }  
        set;  
    }  
    public Boolean hasPrevious  
    {  
        get  
        {  
            return con.getHasPrevious();  
        }  
        set;  
    }  
    public Integer pageNumber  
    {  
        get  
        {  
            return con.getPageNumber();  
        }  
        set;  
    }  
    public void previous()  
    {  
        con.previous();  
    }  
    public void next()  
    {  
        con.next();  
    }  
   
}

Please mark this as solution if this will help you

Thanks
Amit Chaudhary


 
This was selected as the best answer
Vincent van Drunen LittelVincent van Drunen Littel
Hi Amit and Arunkumar,

i already have the VF page and wanted to implement it here, how would you adjust the code?
<apex:page controller="ContactsController" sidebar="false" showHeader="false">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
<script type="text/javascript">
    $ = jQuery.noConflict();
    function SelectContacts(chk, contactId)
        {
            var contactIds = $('input[id$="contactIds"]');
            var selectedContacts = contactIds.val();
            if (chk.checked == true)
            {
                if (selectedContact == '')
                {
                    selectedContacts = contactId;
                } 
                else
                {
                    selectedContacts = selectedContacts + ',' + contactId;
                }
            }
            else 
            {
                var contactIndex = selectedContacts.indexOf(contactId);
                var contactToRemove = '';

                if (selectedContacts.length == contactId.length) {
                    contactToRemove = contactId;
                }
                else {
                    if (contactIndex == 0){
                        contactToRemove = contactId+ ',';
                    }
                    else{
                        contactToRemove = ',' + contactId;
                    }
                }
            
                selectedContacts = selectedContacts.replace(contactToRemove, '');
            }
            
        contactIds.val(selectedContacts);
       // alert (contactIds.val());
    }
</script>
    <apex:form >
        <apex:inputHidden value="{!selectedContactIds}" id="contactIds"/>
        <apex:pageBlock title="Select Targets">
            <apex:pageBlockTable value="{!contacts}" var="con">
                <apex:column headerValue="Select" width="100px;">
                    <apex:inputCheckbox onclick="javascript:SelectContacts(this, '{!con.Id}');"/>
                </apex:column>
                <apex:column headerValue="AccountName" value="{!con.Account.Name}"/>
                <apex:column headerValue="Contact Name" value="{!con.Name}"/>
                <apex:column headerValue="Cargo" value="{!con.Cargo__c}"/>
            </apex:pageBlockTable>
            <apex:commandButton value="Add Target" action="{!addTarget}"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller
public class ContactsController {

    public List<Contact> contacts {get; set;}
    Map<Id, Contact> contactMap {get; set;}
    public string selectedContactIds {get; set;}
    string parentContactId;
    public ContactsController() // CHANGE THIS (SelectConcorrenteController TO ConcorrenteController)
    {
        parentContactId = ApexPages.currentPage().getParameters().get('conId');
        contactMap = new Map<Id, Contact>([select Id, Name, Cargo__c, Account.Name from Contact Order by Account.Name]);
        contacts = contactmap.Values();
    }
    
    public PageReference addFornecedore() {
        List<string> contactIds = selectedContactIds.split(',');
        List<Target__c> Target = new List<Target__c>();
        
        for (string s : contactIds )
        {
            Target__c newtarget = new Target__c (Target__c = parentContactId, Name = contactMap.get(s).Name); 
            Target.add(newtarget);
        }
        if (Target.size() > 0)
        {
            insert Target;
        }
        string strPageRef = '"javascript:window.close();"';
        return new PageReference(strPageRef);
    }
}

Also I have 2 questions to the side if one of you would be able answer would be great.

1. I would like it to show about 20 records per page and have a "previous & next" buttons to show the next 20 records etc.

2. The "add Target" button is not working for some reason, I have this same code applied for different object and it works there, can you see where I'm wrong?

Thank you
Amit Chaudhary 8Amit Chaudhary 8

Also I have 2 questions to the side if one of you would be able answer would be great.

1. I would like it to show about 20 records per page and have a "previous & next" buttons to show the next 20 records etc.
Amit :- You need to user pagination for same

2. The "add Target" button is not working for some reason, I have this same code applied for different object and it works there, can you see where I'm wrong?
Amit :- I am not able to see any method "addTarget" in your code.

Please try below blog code :-
http://amitsalesforce.blogspot.in/2015/04/pagination-using-standardsetcontroller.html


In this code you can see pagination 
Vincent van Drunen LittelVincent van Drunen Littel

Hi Amit, thanks for the quick response.
About the method "addTarget" i think is strange.. as i copied this code from a working one and changed around object and names to target.. 
Would you be able to show me where i need to put the method that is missing?

ps; Im new to apex code, so i most likely dont see what you see.. 
 

thanks a million
 

Arunkumar RArunkumar R
Hi Vincent,

My suggestion for pagination go with standardsetcontroller --> https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/apex_pages_standardsetcontroller.htm

For "addTarget", i saw this button in your visualforce page. But where is the "addTarget" method in controller. What function you want to do using this button?
Vincent van Drunen LittelVincent van Drunen Littel
The function of this button is to add the selected contacts from the list the visualpage has to object targets, which are then displayed in the related list of targets in Account Object
Vincent van Drunen LittelVincent van Drunen Littel
funny thing... doing debug and trying to find why was not adding.. it worked without doing NOTHING! 
go figure... add button is working..
Ajay K DubediAjay K Dubedi
public class DataTableExampleController {
    public List<Contact> contactList {
        get {
            if (contactList == null) {
                contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 1000];
            }
            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>

 
Vincent van Drunen LittelVincent van Drunen Littel
Amit, I've grabbed your code and made it to my needs, only thing is i have a "add target" button that would add selected contacts/accounts to custom object Target.

Here are my codes, 
and error 
Error: Compile Error: Variable does not exist: selectedlstAccounts at line 27 column 40
 
<apex:page controller="CustomPaginationController" sidebar="false">

//I added this
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
<script type="text/javascript">
    $ = jQuery.noConflict();
    function Select1stAccounts(chk, contactId, Account.Name)
        {
            alert( '1' );
            var lstAccounts = $('input[id$="lstAccounts"]');
            var selectedlstAccounts = lstAccounts.val();
            
            if (chk.checked == true)
            {
                alert( '2A' );
                if (selectedlstAccounts == '')
                {
                    alert( '2A1' );
                    selectedlstAccounts = lstAccounts;
                } 
                else
                {
                    alert( '2A2' );
                    selectedlstAccounts = selectedlstAccounts + ',' + lstAccounts;
                }
            }
            else 
            {
                alert( '2B' );
                var accountIndex = selectedlstAccounts.indexOf(contactId);
                var accountToRemove = '';

                if (selectedlstAccounts.length == lstAccounts.length) {
                    accountToRemove = lstAccounts;
                }
                else {
                    if (accountIndex == 0){
                        accountToRemove = lstAccounts+ ',';
                    }
                    else{
                        accountToRemove = ',' + lstAccounts;
                    }
                }
            
                selectedlstAccounts = selectedlstAccounts.replace(accountToRemove, '');
            }
            alert( 'B' );
            lstAccounts.val(selectedlstAccounts);
            alert (lstAccounts.val());
    }
</script>
//Orignal Code
    <apex:form >
        <apex:inputHidden value="{!selectedlstAccounts}" id="lstAccountsIds"/>
        <apex:pageBlock >
            <apex:pageMessages ></apex:pageMessages>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Search}" value="Search" />
            </apex:pageBlockButtons>
            
            <apex:pageblockSection >
                <apex:inputText value="{!acc.Name}" label="Name"/> 
                
            </apex:pageblockSection>
        </apex:pageBlock>
        <apex:pageBlock id="resultId" rendered="{!if(lstAccount != null && lstAccount.size > 0, true,false )}">
            <apex:pageBlockButtons >
                <div style="text-align:right"> 
                  Total Records Found: {!Con.resultSize}  
      <apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>  
      <apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>  
      <apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>  
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>           
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>           
      <apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>&nbsp;  
      <apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>  
      <apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/> 
      <img src="/s.gif" title="Last Page" alt="Last Page" class="last"/>         
                </div>
            </apex:pageBlockButtons>                
            <apex:pageBlockSection columns="1">
                <apex:pageBlockTable value="{!lstAccount}" var="acc" >
                <apex:column headerValue="Select" width="100px;">
                    <apex:inputCheckbox onclick="javascript:SelectAccounts(this, '{!acc.Id}');"/>
                    </apex:column>
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.Account.Name}"/>
                    <apex:column value="{!acc.Cargo__c}"/>
                </apex:PageblockTable>
                <apex:commandButton value="Add Target" action="{!addTargets}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
 
public with sharing class CustomPaginationController 
{

    public Contact acc {get;set;}   
    public ApexPages.StandardSetController con{get; set;} 
    public CustomPaginationController ()
    {
       acc = new Contact();
       lstAccount = new List<Contact>();
    }
    public List<Contact> lstAccount 
    {  
        get  
        {  
            if(con != null)  
                return (List<Contact>)con.getRecords();  
            else  
                return null ;  
        }  
        set;
    }  
    
    
    //added by me to test
     public PageReference addTarget() {
        //system.debug('sssssssss');
        List<Contact> lstAccountsIds = selectedlstAccounts.split(',');
        List<Target__c> lstAccount = new List<Target__c>();
        //system.debug('rrrrrrr');
        for (string s : lstAccountsIds )
        {
      //system.debug('lstAccountsIds: ' + lstAccountsIds);
            system.debug('s: ' + s);
            system.debug('Name: ' + accountMap.get(s).Name);
            Target__c newtarget = new Target__c (Target__c = lstAccount, Name = lstAccountsMap.get(s).Name); 
            Target.add(newtarget);
        }
        //system.debug('yyyyyyy');
        if (Target.size() > 0)
        {
            //system.debug('ppppppp');
            insert lstAccount;
        }
        string strPageRef = '"javascript:window.close();"';
        return new PageReference(strPageRef);
    }   
    
    
    public PageReference Search()
    {
        String query= '';
        String strFilter = '';
        if(acc.Name != null && (acc.Name ).trim() !='')
        {
           strFilter  = strFilter  +  ' where Name Like \''+acc.Name+'%\'' ;
        }
        if(acc.Account.Name != null && (acc.Account.Name).trim() !='' )
        {
            strFilter  = strFilter  +  ' where Name Like \''+acc.Account.Name+'%\'' ;
           
        }
        if(strFilter != '')
        {
            query = 'Select name ,id, Account.Name, Cargo__c from Contact '+strFilter+ ' limit 1000';
            System.debug('Query ---->'+ query );
            con = new ApexPages.StandardSetController(Database.getQueryLocator(query)); 
            con.setPageSize(10);
        }
        else
        {
        }
       return null;
    }
    public Boolean hasNext  
    {  
        get  
        {  
            return con.getHasNext();  
        }  
        set;  
    }  
    public Boolean hasPrevious  
    {  
        get  
        {  
            return con.getHasPrevious();  
        }  
        set;  
    }  
    public Integer pageNumber  
    {  
        get  
        {  
            return con.getPageNumber();  
        }  
        set;  
    }  
    public void previous()  
    {  
        con.previous();  
    }  
    public void next()  
    {  
        con.next();  
    }  
   
}

 
Amit Chaudhary 8Amit Chaudhary 8
Hi,

To get the selected record you can create the Wrapper classes in salesforce
Please check below post
https://developer.salesforce.com/page/Wrapper_Class

if you want pagination with Wrapper class then please try below code :-
http://amitsalesforce.blogspot.in/2014/11/pagination-with-wrapper-class-with.html

NOTE:- You need to merge your code with wrapper class code.
Pleas let us know if this will help you
S SaiS Sai

HI
Ajay K Dubedi

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

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>

in the same process i want to display account Details . in this senario here searching based on contact firstname . i want to search based on account number