Integrating jQuery DataTables Into Splunk: Tutorial Part 4

This blog-screencast tutorial covers how to integrate jQuery DataTables into Splunk. Data tables are a great way to easily integrate awesome features into simple HTML tables. After following along with this tutorial, the final result will be a table that you can filter down and integrate into your own Splunk environment and do some cool stuff with it.



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:

$("#data-table-wrapper", this.$el).html(_.template(DT_Template, {
    data: this.data
}));

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:

<script type="text/x-template" id="data-table-template">
    <table cellpadding="0" cellspacing="0" border="0"
           class="table tale-chrome table-striped display dataTable"
           id="table">
        <thead>
            <tr role="row">
                <th>Time</th>
                <th>Message</th>
            </tr>
        </thead>
        <tbody>
            <% for(var i=0; i < data.length; i++) { %>
                <tr>
                    <td><%- data[i][0] %></td>
                    <td><%- data[i][1] %></td>
                </tr>
            <% } %>
        <body>
    </table>
</script>

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:

<search id="dataTableSearch">
    <query>
        index=_internal sourcetype=splunkd source="/Applications/Splunk/var/log/splunk/splunkd.log" 
        | dedup _time, message 
        | table _time, message
    </query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
</search>

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:

.paginate_button {
    border: 1px solid transparent;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: transparent;
    line-height: 20px;
    min-width: 10px;
    padding: 2px 8px;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.paginate_button:hover, .paginate_button.current {
    background-color: rgba(0,0,0,0.05);
}

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




Close off Canvas Menu