Show Pagination and Colum Sorting on VF page using Jquery Plugin

Requirement:  To show Account record in table form on VF page and user able to paginate pages and sort the column:

 Solution:  Using Jquery Plugin you can directly implement pagination and column Sorting

 Download Jquery Plugin : https://sfcomponent-dev-ed.my.salesforce.com/sfc/p/#6F000001f5y8/a/6F0000004XWj/F0czOc51PF5iaC7ERZBb.cO.nU95xWyEaGcUTmPkCaU

 Add data table zip file in Static Resource

 Class Code:

 public class AccountController {
 public List<Account> lstofacc{get;Set;}

 public AccountController ()
 {
     lstofacc = new List<Account>([select id,AccountNo, name from account]);
     
 }

 }
Page Code:

 <apex:page controller="AccountController " sidebar="false" standardStylesheets="false" docType="html-5.0" tabStyle="Account">

 <head>
<apex:stylesheet value="{!URLFOR($Resource.DataTable,'DataTable/datatables.min.css')}" />
<apex:stylesheet value="{!URLFOR($Resource.DataTable,'DataTable/jquery.dataTables.css')}" />
<apex:includeScript value="{!URLFOR($Resource.DataTable,'DataTable/datatables.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.DataTable,'DataTable/jquery-1.11.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.DataTable,'DataTable/jquery.dataTables.min.js')}"/>
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                //var contactTable = j$('[id$="contacttable"]').DataTable();
j$('[id$="contacttable"]').dataTable(
 {
"aoColumnDefs": [{
 "bSortable": false, 
 "aTargets": [-1]
}]
 }
);
            });

         </script>
    </head>
    <body>
    <apex:form >
          <table id="contacttable" class="display" border="1">
            <thead>
                <tr>
                <th> Account ID</th>
                <th> Account No</th>
                <th> Account Name</th>
                
                </tr>
            </thead>
            <tbody>            
                <apex:repeat value="{!lstofacc }" var="objacc">
                    <tr>
                        <td><apex:outputField value="{!objacc.Id}"/>  </td>
                        <td><apex:outputField value="{!objacc.accountNumber}"/></td>
                        <td><apex:outputField value="{!objacc.Name}"/></td>
                         
                    </tr>
                </apex:repeat>
            
            </tbody>
        </table>
       
    </apex:form>      
    </body> 
</apex:page>
Out Put:


Thanks,
Sumit Shukla
sumitshukla.mca@gmail.com
skypeid: shuklasumit1





Comments

  1. edythtaffMarch 4, 2022 at 7:32 AM

    Casino Tycoon Near Me | Mapyro
    Find Casino Tycoon near you on Mapyro! Use our list 영천 출장샵 to find the best Casino Tycoon Near Me in 김천 출장샵 New Jersey 경상남도 출장마사지 and find the best casino 부산광역 출장안마 in New 강릉 출장마사지

    ReplyDelete

Post a Comment

Popular posts from this blog

Salesforce Spring 16 Release Exam (Maintenance Exam Q&A) for Developer 201 Admin

Spring 16 Salesforce Admin 201 Maintenance Exam 1. Which areas are calculated for the Health Check score? Choose 2 answers A. Number of users B. Session Settings  C. Profiles and Permissions assigned D. Password Policy E. Login attempts 2. What key user access data is included in login forensics? A. Who logged in from a new browser more than once in a day. B. Who logged in more than the number set in the profile. C. Who logged in during business hours. D. Who logged in more than the average number of times. 3. What is true regarding the new Data Loader? A. It has a new column flagging duplicate files. B. It supports Web Server OAuth Authentication for Windows or Mac. C. It has downloadable add-ons published through the AppExchange. D. It works with all legacy security protocol. 4. What does the Customize Application permission setting allow? A. To create article types. B. To edit contract settings. C. To modify custom picklist values. D. To create a...
Read more

Show Hyper Link On Add Error in Salesforce Trigger

Requirement: Check Duplicate record in system and show the add error in form of hyperlink corresponding duplicate record ID Solution : Write a trigger and show add error objExistingRecord >>> OldRecord Id objNewRecord >> New Record  objNewRecord.addError('Same Combination of Record already Inserted in System: <a href=\'/'+ objExistingRecord.id +'\'>'+objExistingRecord.Name+'</a>', false);                                                                           Thanks                                                Sumit Shukla
Read more

Show the Success Message before Redirecting the Detail page on Visualforce Page

Requirement: To show the Success message before Redirecting the Detail page. On Click on Save button show the successful message after that redirect to detail page.  Solution: Create the Controller Class public class ClassName { // Create a boolean property     public boolean isChanged{get;set;}             public void SaveData(){         //Write Save/update Logic //insert/update list or object /set the boolean value as a true after list update/insert isChanged=true;         ClassName              } // This method will call after saving the record. and redirect to specify id     public pagereference redirectToRequiredPage(){         PageReference pageRef=new PageReference('/' +Recordid);         return pageRef;     } } Create the visualforce page <apex:page Contr...
Read more