Why is my 'details' row adding to the number of entries?

BaltimoreChad

Fair warning, my programming experience is mostly with Python, but I've managed to get this up and running for the most part.

Fair warning... HTML/JavaScript/CSS are not my strongest areas.

Here is what I'm attempting to do:

• Four columns of data.
• User searches for an item, and four cells are populated, one with a + next to it.
• User clicks + and additional details appear in the table.

I've seen many examples of this on the web, but I just cannot get this working correctly. Right now I have this working about 90% of the way, all that I am missing is the ability to 'search' my content. I'm also experiencing an issue where my 'collapsed' rows are being counted as entries in my table - which I do not want.

I tried implementing https://datatables.net/reference/api/row().child(), but I failed terribly. I could not get it working with flask + sqlite.

Here is a working link to my web application, which shows my current issues:

http://162.243.16.88/query/?script_id=&filename=ms-&dep=&kb_item=&username=&search=

If you look at that page, you'll see the format I'm going for, and you'll see my overall goal. Here is where I'm looking for some assistance:

• "Showing 1 to 10 of 30 entries": I need this to actually show 10 items, and not 5 visible rows/5 hidden rows.
• If you search for 71035, you will see my second issue. The search works but I can no longer expand the details section.

Here is my working code from the link above:

<style>
    a[aria-expanded="true"] > .glyphicon-collapse-up:before { content: "\e159"; }
</style>
<script>
    $(document).ready(function() {
            $('#pluginInfo').dataTable({
        "aaSorting": [],
        "bProcessing":true,
            "fnPreDrawCallback":function(){

            $("#pluginInfo").hide();
           },
            "fnDrawCallback":function(){
            $("#pluginInfo").show();
            },
           "fnInitComplete":function(){
    }
    });
});
</script>

<table id="pluginInfo" class="table table-striped table-hover dt-responsive details-control" cellspacing="0" width="100%" style="display:none">
<thead>
    <tr class = "info">
        <th>Plugin ID: </th>
        <th>Plugin Name: </th>
        <th>Filename: </th>
        <th>Plugin Type: </th>
    </tr>
    </thead>
    <tbody>
        {% for plugin in plugins %}
        <tr>
            <td><a id="details" href="#{{ plugin.pluginID }}" data-toggle="collapse"><i class="glyphicon glyphicon-collapse-up"></i></a>{{ plugin.pluginID }}</td>
            <td>{{ plugin.pluginname }}</td>
            <td>{{ plugin.filename }}</td>
            <td>{{ plugin.plugin_type }}</td>           
        </tr>
        <tr id="{{ plugin.pluginID }}" class="collapse">
        <td>
            <h5><b>Required KB items: </b></h5>
            {% if plugin.requiredkeys|length > 2 %}
                {%- for rkey in plugin.requiredkeys.split(',') -%}
                    {{ rkey.strip("[]") }}<br>
                {% endfor %}
            {% else %}
                <p>This plugin has no required keys.</p>
            {% endif %}
            </td>
            <td>
            <h5><b>Excluded KB items: </b></h5>
            {% if plugin.excludedkeys|length > 2 %}
                {%- for ekey in plugin.excludedkeys.split(',') -%}
                    {{ ekey.strip("[]") }}<br>
                {% endfor %}
            {% else %}
                <p>This plugin has no excluded keys.</p>
            {% endif %}
            </td>
            <td>
            <h5><b>Dependencies: </b></h5>
            {% if plugin.dependencies|length > 2 %}
                {%- for dep in plugin.dependencies.split(',') -%}
                    {{ dep.strip("[]") }}<br>
                {% endfor %}
            {% else %}
                <p>This plugin has no dependencies.</p>
            {% endif %}
            </td>
            <td>
            <h5><b>Sets the following KB Items: </b></h5>
            {% if plugin.set_kb_items %}
                {%- for kb in plugin.set_kb_items.split(',') -%}
                    {{- kb.strip() -}}<br>
                {% endfor %}
            {% else %}
                <p>This plugin sets no KB items.</p>
            {% endif %}
            </td>   
        </tr>
    {% endfor %}
  </tbody>
</table>

As I mentioned, web design is not my strongest area, and I think I've done a decent job so far, but I'm just stuck on how to make this work. If what I'm trying to do is just not possible, that's fine, I'd just like to hear it from someone. Thanks!