Add search results to table
Now that you have a search manager, let's show the results in a table. To do that, we'll create a Table view and bind it to the search manager. If the search is modified (for example, by using a SearchBar view to change the search query, or a TimeRange view to change the time range), the Table is notified and updated automatically.
Add a table
Like other views we've looked at so far, you'll add the Table view by using tags in your HTML templates. The view is bound to a search manager by setting its managerid property to the ID of the search manager. Then, the table is populated with the results of that search.
Here's an example:
{% table id="example-table" managerid="example-search" pageSize="5" %} {% searchmanager id="example-search" search="| inputlookup splunkdj.demo.dataset.csv | fields artist_name bytes clientip | rename _time as download_time "%}Both the table and the search manager are declared in the app's HTML template using template tags:
{% table id="example-table" managerid="example-search" pageSize="5"%}
{% searchmanager id="example-search" search="| inputlookup splunkdj.demo.dataset.csv | fields artist_name bytes clientip | rename _time as download_time" %}
If a search bar and a table are bound to the same search manager, results of a search in the search bar will populate the table. Here is a searchbar and table bound to the same search manager. Try searching on your Splunk data and see how the table is updated.
{% searchbar id="example-searchbar" managerid="example-search2" timerange=False %} {% table id="example-table2" managerid="example-search2" pageSize="5" %} {% searchmanager id="example-search2" search="index=_internal | head 100"%}The code required to do this is simple:
{ % searchbar id="example-searchbar" managerid="example-search" timerange=False % }
{ % table id="example-table" managerid="example-search" pageSize="5" %}
{ % searchmanager id="example-search" search="index=_internal | head 100"% }
<script>
require(["splunkjs/ready!"], function() {
var manager = splunkjs.mvc.Components.getInstance("example-search2");
var searchbar = splunkjs.mvc.Components.getInstance("example-searchbar");
searchbar.on("change", function() {
manager.settings.unset("search", {silent: true});
manager.settings.set("search", searchbar.val());
});
});
</script>