Integrating jQuery DataTables Into Splunk: Tutorial Part 3
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:
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:
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.
