Integrating jQuery DataTables Into Splunk: Tutorial Part 4

By |Published On: July 15th, 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.

Populating the DataTable

Now that we’re actually rendering out our data table successfully, the next thing we’re going to do is pass our data into the template.

We need to modify the following code inside the DataTableView.js file:

Copy to Clipboard

Remember, this.data was passed in earlier when we pulled out the results in our index.js file. We now use that to pass the data into our template.

Now, open up the template file data_template.html:

Copy to Clipboard

Inside of the <tbody/> element we will loop through the data we passed to it in order to actually render out the results. Remember, because we are editing the template file you may need to run _bump to clear out the cache before the changes show up.

Your dashboard should now look like this:

The great thing about using a DataTable is that we can filter the results in real-time instead of having to re-run the search if we are looking for a specific set of results. Very handy!

At this point we don’t need the original table, just the search. So we can edit the source and remove the table code so its only the following:

Copy to Clipboard

Save your changes and now only your DataTable should show up.

Finishing Touches

At this point we are pretty much done, but we can clean up our table a little. Specifically, the pagination is all scrunched together. Let’s go ahead and create a new css file and then add some style for the pagination.

In the dashboard add stylesheet=”style.css” in the <dashboard/> tag.

Inside of the appserver/static folder create a new file called style.css. Add the following to style.css:

Copy to Clipboard

Save the file and then restart Splunk.

Once you restart, the pagination should be structured a little better:

Wrapping Up

That’s it. You now know how to integrate a DataTable into Splunk. If you have any questions, please post them below!

Below are the links for the other pieces and parts of the tutorial:

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.