Integrating jQuery DataTables Into Splunk: Tutorial Part 3

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:

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.

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:

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

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

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

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:

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

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

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() { },

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:

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:

Looking at the template file, there are two sections:

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:

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:

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

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).