Integrating jQuery DataTables Into Splunk: Tutorial Part 4

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

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:

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:

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:

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:

• Part 1
• Part 2
• Part 3