Integrating jQuery DataTables Into Splunk: Tutorial Part 3

By |Published On: July 14th, 2016|

PLEASE NOTE: This blog series is currently out-of-date, but if you’d like to download a working example you may refer to the associated GitHub Repo. In the meantime, we’re working on updating this series.

Setting Up the Template

Now that we know we’re passing the data successfully into the view, we want to actually render something out to the DOM. So, we need to set up a template to attach our view. In this part of the tutorial, we’re going to start working on building out the templates and loading those templates in from external files and then using those templates inside of our data table view.

Inside of the components folder create a new folder called templates. In the templates folder create a file called data_table.html and put the following:

Copy to Clipboard

This sets up the basics for our table and will apply the appropriate styling to it so it matches the look of other tables in Splunk.

Next, below the <script /> template tag we will add a wrapper div in which will we append our table.

Copy to Clipboard

Loading in the Template Files

Before we do anything we will need to use require.js’ text.js in order to load and render the templates.

Download a copy of text.js here: https://github.com/requirejs/text/blob/master/text…

Once you’ve downloaded it, place it inside of your components folder. We will then reference it inside of the DataTableView.js file.

Inside of DataTableView.js add the following in the require.config’s path object:

Copy to Clipboard

Then in the define function load in the template using the text! argument:

Copy to Clipboard

And finally, make a reference to the template in the function parameter:

Copy to Clipboard

So, in the end you will have something that looks like this:

Copy to Clipboard

We will need a div to render the table into. So, go to your dashboard and edit the source and add the following at the bottom:

Copy to Clipboard

Inside of index.js add a reference to the element that our view will use to render our DataTable:

Copy to Clipboard

Now that we have an element to reference, we can use that inside our render method in the DataTableView.js file:

Copy to Clipboard

Note: Moving forward if you make changes to your template, but they don’t show up, you may need to run _bump even if you modified the caching in server.conf earlier. The reason for this is we turned off caching for our JavaScript files but this won’t affect our template files.

Rendering the DataTable

Rendering the DataTable will take a little extra work. First, we will create a new method in our DataTableView.js file called renderDT to handle the rendering of the DataTable. We could put this all in our render method directly, but from a readability standpoint this separation makes more sense.

Open the DataTableView.js file and add the following method about the render method:renderDT: function() { },

Copy to Clipboard

While we’ve already loaded our template file successfully, we still need to render the <script type=”text/x-template” id=”data-table-template”> portion of the file, as this wont be rendered out by default. In order to do this, first add the following in to the renderDT method:

Copy to Clipboard

This is saying that we want to pull the text from the <script type=”text/x-template” id=”data-table-template”> part of the template.

In order to actually render it into the DOM, we need to add the following:

Copy to Clipboard

Looking at the template file, there are two sections:

Copy to Clipboard

Our code is saying that in our view’s element, which was set earlier as #tableWrapper look for the div ‘data-table-wrapper’ and append the ‘data-table-template’ to it. Using the .html() method ensures that it is rendered as HTML and not text. We also use Underscore’s _.template() method. Lastly, we pass an empty object as the last parameter of the html() method. We will be filling this in a little bit later.

Now we need to build out the DataTable:

Copy to Clipboard

Our code is saying that in our view’s element, which was set earlier as #tableWrapper look for the div ‘data-table-wrapper’ and append the ‘data-table-template’ to it. Using the .html() method ensures that it is rendered as HTML and not text. We also use Underscore’s _.template() method. Lastly, we pass an empty object as the last parameter of the html() method. We will be filling this in a little bit later.

Now we need to build out the DataTable:

Copy to Clipboard

Finally, we need to call the renderDT method inside the render method:

Copy to Clipboard

When you refresh the dashboard you should see the following:

Fantastic…we’re all done – oh, wait we need our data to actually populate the table. We’ll do that next in Part 4!

(Also, here are the links for Part 1 and Part 2, just in case).

Share with your network!
Get monthly updates from Hurricane Labs
* indicates required

About Hurricane Labs

Hurricane Labs is a dynamic Managed Services Provider that unlocks the potential of Splunk and security for diverse enterprises across the United States. With a dedicated, Splunk-focused team and an emphasis on humanity and collaboration, we provide the skills, resources, and results to help make our customers’ lives easier.

For more information, visit www.hurricanelabs.com and follow us on Twitter @hurricanelabs.