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>