Tag Archives: jQuery

How to use jQuery in Salesforce Lightning Aura Component?

Step 1: Upload the jQuery library as a static resource in your Org.

Step 2: Use ltng:require to load static resource JavaScript libraries on your component.

    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" />

Step 3: To utilize the library include the afterScriptsLoaded event and add the method in your aura component JS controller.

Aura Component :

    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" afterScriptsLoaded="{!c.handleAfterScriptsLoaded}" />

JS Controller:

    handleAfterScriptsLoaded : function(component, event, helper) {
            console.log('jQuery Loaded');

jQuery Data Tables in Visualforce Page

Here is an example of ‎jQuery Data tables using in Visualforce. It will give you the pagination and search functionality in Visualforce page. Here I’m displaying list of account records.

Apex Class:

public class SampleController{
    public List<Account> accList {get; set;}
    public SampleController(){
    accList = [SELECT Name, AccountNumber, Phone FROM Account LIMIT 10000];


Visualforce Page:

<apex:page Controller="SampleController" readOnly="true" tabStyle="Account" sidebar="false">
        <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"/>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var accTable = j$('[id$="accTable"]').DataTable({
        <table id="accTable" class="display">
                    <th>Account Number</th>
                <apex:repeat value="{!accList}" var="acc">