Menu
  • Home
  • Services
    • Implementation Services
    • Support Services
    • Salesforce Support Services on Tap
    • Customization Services
    • Integration Services
    • Consulting Services
    • Product Development with Salesforce
  • Focus Areas
    • Buyer Journey Management
    • Supporting Nonprofits
    • Salesforce Integration Orchestration
    • Employee Management
  • Case Studies
  • Blog
  • Internship
  • Contact
  • COVID 19 & beyond

Implementing datatable with minimal efforts using jQuery Datatable plugin!!

CategoriesBlog / Salesforce Technology

Admin

October 5, 2016

Data-tables/grid is one of the most commonly used UI component. In this blog we’ll understand the basics of jQuery Data-table like its implementation, usage and advanced features.

Data-table is one of the powerful jQuery plugin used for creating table and adding interactions to them with very minimal efforts. In addition, it provides searching, sorting and pagination without any development efforts.

The topics I am going to cover in this blog are –

  1. DataTable Set Up
  2. Understanding library conventions
  3. Getting Started
  4. Summary

DataTable Set Up

Get the library files from the DataTables website.

Data table Plugin can be downloaded from the following links –
https://datatables.net/download/index
http://jquery.com/

In case you don’t want to maintain files locally, then you can use CDN’s like Microsoft CDN.

Prerequisite – It’s a jQuery plugin, so you need to include the jQuery library too.

Note –  In the below code snippets we have used JS and CSS files from our local repository, you can download it and use it in the similar way or you can use CDN links.

Understanding library conventions

Before going to implementation, it would be useful to understand the conventions used in the data table library.

Hungarian notation are used for naming variables, so basically it adds certain prefix to its name which helps to understand type of data hold by the variable.

Variable represents an –

Key Highlights: Salesforce for Marketing Keynote at Dreamforce'16!!

So it will be easy to identify type of data a variable is holding by the conventions mentioned above. While working with this plugin you may see multiple prefixes used together, like “ai” representing an array of integers.

Getting started

DataTable plugin can work with data from a variety of sources like it can work on an HTML table or using data as an array while loading the table or it can work on data coming from an Ajax call.

So let’s get started with the implementation of datatable. We will take two examples here to understand the plugin.

Example 1 – Creating datatable with data populated in HTML table itself

We have an HTML table with a column that contains names of food companies. Let’s see the power of DataTable plugin.

<html>
<head>
<linkrel="stylesheet"type="text/css"href=" jquery.dataTables.css">
</head>
<body>
<tableid="demo">
<thead>
<tr><th>Food Company</th></tr>
</thead>
<tbody>
<tr><td>Parle</td></tr>
<tr><td>Cadbury </td></tr>
<tr><td>Coco Cola</td></tr>
</tbody>
</table>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<scripttype="text/javascript"charset="utf8"src=" jquery.dataTables.min.js"></script>
<script>
  $(function(){
    $("#demo").dataTable();
})
</script>
</body>
</html>

Capture1

With the very minimal efforts we have created a nice looking table containing search box, sorting on click of the column name. And you will be amazed to listen that this table is responsive too. Isn’t it amazing?

If you have to implement these feature’s by your own, just imagine how much time it would have taken.

So what we have done here is

  • Included Datatable CSS file
  • Included Datatable JS file
  • Instantiated datatable on the HTML table having ID ‘demo’ by $(“#demo”).dataTable()

Example 2 – Creating datatable with data populated from JavaScript array

Now we need to list more food companies with more details like company name, website and founder name using a JavaScript array instead of directly inserting data in HTML table.

Now we will first create an HTML table, with column headings and an empty table body.

<tableid="demo">
<thead>
<tr>
<thclass="foodcompany">Name</th>
<th>Website </th>
<th>Founder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Instantiating DataTable to this HTML table.

$("#demo").dataTable({
"aaData":[
["Parle","parle.com","Chauhan family"],
["CocaCola","cocacola.com","Asa Griggs Candler"],
["Cadbury","cadbury.com","John Cadbury"],
["Lays","lays.com","Founder"],
["Pepsi","pepsi.com","Donald M. Kendall"]
],
"aoColumnDefs":[{
"sTitle":"Food Company"
,"aTargets":["foodcompany "]
},{
"aTargets":[1]
,"bSortable":false
,"mRender":function(url, type,full ){
return'<a href="'+url+'">'+url+'</a>';
}
}]
});

Our table will be displayed as shown below. We will have a clickable link in the website column of all record.

Capture1

Below is the description of the datatable options used in above example to display datatable using javascript array –

Capture15

Summary

DataTables is a highly flexible and feature rich jQuery library to work with tables with a very minimal efforts.

References 

https://datatables.net/examples/index

Recent Posts

  • Grant Sourcing, Management and Impact Reporting
  • How do you get your alumni to get involved with you on your initiatives?
  • What Information do I need to capture and maintain with respect to my Alumni?
  • What information do I need to capture about my volunteer and why?
  • What information do nonprofits need to capture and maintain of their donors and the donations they give?

Categories

  • Blog
  • Communities
  • Finance
  • General
  • Nonprofit
  • Sales
  • Salesforce Technology
  • Services

Archives

  • February 2022
  • January 2021
  • October 2020
  • September 2020
  • August 2020
  • March 2020
  • February 2020
  • September 2019
  • April 2019
  • February 2019
  • November 2018
  • September 2018
  • August 2018
  • June 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • July 2017
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
Thinqloud was founded with the vision of helping business grow using Salesforce®.

We do this by driving automation and process management using Salesforce® Technology thereby improving and implementing integrated CRM ,Sales and Marketing processes. Our mature team comprises of IT professionals (Technology and DevOps), Business process consultants and Salesforce® enthusiasts.

Email : sales@thinqloud.com

Services

  • Solution Development Services
  • Salesforce Implementation Services
  • Salesforce Support Services
  • Salesforce Customization Services
  • Salesforce Integration Services
  • Classic to Lightning Migration
  • Salesforce Consulting Services

Site Links

  • Home
  • Blog
  • Case Studies
  • Contact
  • Internship

© 2022 Thinqloud, All Rights Reserved.

  • Privacy