jQuery datatable logo

How To Use jQuery DataTable Plugin In Salesforce Lightning Component -: Sample

Lightning Component

jQuery DataTables is a very powerful plugin for creating table with advanced interaction controls. It provides searching, sorting, pagination  and many more cool features without any configuration. In this post we are going to learn how we can use this jQuery datatable in salesforce lightning components.

Check AlsoData Table With Show/Hide Columns Dynamically In Lightning Component

So in this sample post, we will fetch the opportunity object records from server and after that display those records using jQuery data table.

Step 1 : Download & Upload jQuery library and  jQuery data table plugin, in static resource.

In order to use data table jQuery plugin, you must include the jQuery, javaScript and CSS file on your Lightning Component via static resources.

Download Data Table jQuery Plugin
Download jQuery library [version 2.2.4 Recommended]
  • jQuery version 2.2.4 is NOT included within the dataTable plugin zip file – you must download it.
  • Go to below link for download JQuery 2.2.4 minified version. (2.2.4 Recommendation)
  • https://code.jquery.com/jquery-2.2.4.min.js
  • For download jQuery file right click on the page and click on save as… link OR press CTRL + S button on keyboard.

  • Save the JS file on your computer.
Step 2 : Upload Data Table zip file + jQuery js file as a static resources in your Salesforce org.

Static resource is a file or collection of files that is stored on Salesforce. Once your Data Table zip file and jQuery2.2.4 JS file  is added as a static resource, it can be referenced by any of your lightning component.

  • After successfully download both files (DataTables-1.10.16.zip + jQuery js file) now, we can upload these as a static resources.
  • For upload zip file, from Setup >> Develop >> Static Resources >> New.
  • In the Name field, enter the name which is use in lightning component.
  • Click Choose File or Browse, and select dataTable zip file which we downloaded before.
  • In the Cache Control drop-down list, select Public.
  • Click on the Save button.

Follow same steps to upload both files.

data table jQuery upload sfdc
Data Table Zip file upload…

 

upload jQuery files
jQuery 2.2.4 JS file upload

 

Step 3 : Use jQuery Data Table on salesforce lightning component.

jQuery data table lighting demo

Step 4 : Create Apex Controller 

From developer console >> file >> new >> Apex Class 

jQueryDataTableCtrl.apxc

Step 5 : Create Lightning Component

From developer console >> file >> new >> Lightning Component 

dataTableDemo.cmp

  • By the ltng:require tag in lightning component we can load external CSS and JavaScript libraries after we upload them as static resources.
dataTableDemoController.js

  • see code comments..

Check Also : Powerful Lightning Datatable base component – Example Using Fieldset

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]

Output :

jQuery data table lighting demo -DataTable

it’s just a demo…you can find more cool features of dataTable here

Some Useful Resources : 

Check Also : Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  or Developer Forums 🙂

(Visited 5,624 times, 18 visits today)

25 comments

  • Hi,

     

    I used the datatable component twice in my homepage. In one component I am able to see the search bar, pagination but in the other component it is not loading. If I remove one component , it appears in the other component. I think it gets loaded only once in a page.

    Can you please tell me workaround for it?

  • Hi Piyush,

    I tried this in my Org but when I try to rerender the table with new data on picklist on-change event, it is showing weird results like,
    1) very slow in loading
    2) Still seeing old data in the table after picklist change, but I can see new data returning from the controller.

  • I was trying to display data based on list views. its working fine all functionality(pagination and sorting) for default list view only . when i changed list view the functionality is not working i meant pagination and sorting.

  • How can we reload the Datatable with new data ? i am trying to feed the Datatable with DOM source but when i destroy the Datatable and initialize it again it give me some problems: like ‘b.nTableWrapper is null’  ‘i is unidefined’ and the table data is messed up.

    Thanks for the help

     

  • How can i reinitialize the table properly in salesforce Lightning Experience, because i am doing a destroy() method but it gives me errors such as: ‘b.nTableWrapper is null’ or ‘i is undefined’ . This is my table that i am updating depending on a click event:

    Thanks for any help

     

     

  • use below code in scriptsloaded function

    var $ = jQuery.noConflict();

    and the below

    setTimeout(function(){
    jQuery(‘#tableId’).DataTable();
    // add lightning class to search filter field with some bottom margin..
    jQuery(‘div.dataTables_filter input’).addClass(‘slds-input’);
    jQuery(‘div.dataTables_filter input’).css(“marginBottom”, “10px”);
    }, 500);

  • I used this on a lighting component and it works perfectly in classic, however when the user is fully on lighting experience the JQuery does not seem to load.  Does anyone have any idea how to fix it?

  • It is working fine if we test it by creating a lightning app. But if we test the datatable in Lightning epxerience, sorting is not working like Andy Aldis said.

  • i want to use check box for select a record and select all. and also i want to show all the records in a single page without any pagination since i have around 5000 records. if possible please help me with the sample code.

Leave a Reply