Sorting,pagination and Searching on data Table using jQuery-Salesforce

Feedback

In default Salesforce list view we can view all the records and it also include the standard functionality of sorting and pagination but what if we need to create a custom list view with extra functionality added to it like button or something else then if you remember I told in one of my post that to create sort able Page block table but it’s still lack the functionality of pagination and searching so if you want only sorting in your list view you can take at my post http://ohotech.com/2015/05/sorting-pageblock-table-using-jquery-in-salesforce.html , in today post we are going to use a different jQuery plugin that provide pagination , sorting and searching functionality in the list view, so let’s see how to create such list view.

Sorting,pagination and Searching on data Table using jQuery plugin Data Tables

it is not very hard to implement this functionality in visualforce page, so there are two things one is visualforce page and one is apex class and in apex class we query any object in my case it is account and i am storing the result of query in list and passing that list to the visualforce page this what i have done in my example, i try to make it as simple as it can be so for apex class code see below.

public with sharing class paginationjquery {
	public list<Account> acc{get;set;}
	public paginationjquery() {
		acc=new list<Account>();
		onLoad();
	}
	public void onLoad(){  //This function get called automatically on on load

		acc=[Select ID,Name,Phone,AccountNumber,Sic from Account limit 520];


	}
}

That’s my apex class now let’s see our visualforce code which is the important thing to look for it include two JQuery script and one CSS file, if we are going to use any jQuery plug-in then we have make too sure we refer jQuery in our visualforce page , see below code visualforce page.

<apex:page showHeader="false" sidebar="false" controller="paginationjquery">
	<apex:form >
	<apex:pageBlock >
	<apex:stylesheet value="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"/>
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
	<apex:includeScript value="https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"/>

	<style type="text/css" media="screen">
		table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
		    background-color: #F1F1F1;
		}

	</style>
	<script type="text/javascript" charset="utf8">
    var oTable;
    var currentNumberDisplayed = 5;

    $(document).ready(function() {
        $('#load').click( function () {
            var oSettings = oTable.fnSettings();
            currentNumberDisplayed += 5;
            oSettings._iDisplayLength = currentNumberDisplayed;
            oTable.fnDraw();
        });

        oTable = $('[id$=testTable]').dataTable({
            "iDisplayLength": 5
        });
    });

</script>

<apex:dataTable value="{!acc}" var="ac" id="testTable" >
    <apex:column >
        <apex:facet name="header"><apex:outputLabel value="ID" /></apex:facet>
        <apex:outputText value="{!ac.ID}"/>
    </apex:column>
    <apex:column >
        <apex:facet name="header"><apex:outputLabel value="Account Number" /></apex:facet>
        <apex:outputText value="{!ac.AccountNumber}"/>
    </apex:column>
    <apex:column >
        <apex:facet name="header"><apex:outputLabel value="Sic" /></apex:facet>
        <apex:outputText value="{!ac.Sic}"/>
    </apex:column>
    <apex:column >
        <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
        <apex:outputText value="{!ac.phone}"/>
    </apex:column>
    <apex:column >
        <apex:facet name="header"><apex:outputLabel value="Name" /></apex:facet>
        <apex:outputText value="{!ac.Name}"/>
    </apex:column>
</apex:dataTable>

<button type="button" id="load">Load</button>
</apex:pageBlock>
	</apex:form>
</apex:page>

Now as you can see in the code there is another script from 14th line to 31st line, let breakdown this code so see below.

“iDisplayLength”: 5 //this line will decide how much records will be visible on page 1
var currentNumberDisplayed = 5; //this line control how much records to show on clicking button
$(‘[id$=testTable]’).dataTable //Make sure id$=id of data table see id of data table in visualforce page, that it all the things that we want to do is completed if you want to take a look at the example you can do it from the below link.

I hope you like my this post, my further planning to develop it more by providing edit , delete links ,if you have any query related to this post you can leave a comment below in the comment section , you can also view my other post from the below section.

Note

  • This jQuery plug-in work upon only on apex:dataTable tag.
  • ID field is not searchable from the search box.
  • Sources and Citations
    http://www.datatables.net/
    https://developer.salesforce.com/page/Developing_Apps_with_jQuery

    Related Articles :

    Speak Your Mind

    *