Documentation menu
JS
JS React Angular Vue

Integration with jQuery

In this tutorial, you will learn how to integrate WebDataRocks with jQuery.

jQuery is a JavaScript library which purpose is to simplify using JavaScript on your website. It helps to handle HTML/DOM/CSS manipulation, HTML event methods, AJAX calls, and more.

Step 1. Create a new project

Step 1.1. Create a new folder for the project, e.g. my-jquery-project/.

Step 1.2. Create an index.html file inside my-jquery-project/ and include jQuery from the Google CDN to the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Step 2. Add WebDataRocks dependencies

Step 2.1. Create a <div> container for a pivot table component:

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
</body>
</html>

Step 2.2. Add the WebDataRocks scripts and styles to the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
</body>
</html>

Step 3. Initialize the pivot table component on the page

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
    <script>
        var pivot = $("#wdr-component").webdatarocks({
            toolbar: true
       });
    </script>
</body>
</html>

Step 4. Load the report

To display the data on the grid, add a report attribute and specify a URL to the report (or define an inline report):

<!DOCTYPE html>
<html>
<head>
    <title>My WebDataRocks & jQuery project</title>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="wdr-component">The pivot table control will appear here</div>
    <script>
        var pivot = $("#wdr-component").webdatarocks({
            toolbar: true,
            report: "https://cdn.webdatarocks.com/reports/report.json"
       });
   </script>
</body>
</html>

Find out more in the CodePen demo.

Init jQuery call

An initial jQuery call for embedding of the component has the following structure:

$("#wdr-component").webdatarocks({
  container: String,
  toolbar: Boolean,
  report: ReportObject | String,
  width: Number,
  height: Number,
  customizeCell: Function,
  global: ReportObject,
  reportcomplete: Function | String
})

This jQuery call embeds the pivot table component into the HTML page and takes as a parameter the id attribute of a container element (i.e., #wdr-component in this example).

Use this method to add the component to the HTML page with all the necessary parameters for the initialization.

Parameters

The list of parameters is the same as for an Init API call.

You can set event handlers as the properties of the initial jQuery call. See the list of events here.

All these parameters are optional. You can run $("#wdr-component").webdatarocks() and the component with an empty grid, the default width and height, and without the Toolbar will be added to the page.

Returns

A reference to the object of the embedded pivot table. You can create multiple instances and work with them on the same web page.

Example

Get a reference to the instance of the component by using the jQuery selector:

var pivot = $("#wdr-component").data("webdatarocks");