Description of problem:
I was dealing with a slow table, the slow part being the search feature as well as the table slowly resizing itself when searching or sorting and becoming unresponsive. I started using "Scroller" and this fixed the unresponsiveness and made the table much smoother. Only problem is, I'm displaying up to two tables on the same page and after adding scroller, the second table isn't being instantiated as a dataTable. The first table is successfully instantiated as a dataTable, but the second table looks like plain html. If I remove Scroller, both tables once again show up as dataTables. I really like optimization provided by Scroller, so I'm hoping there's an adjustment I can make to keep Scroller and have it work with two dataTables on the same page.

Debugger code:

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/scroller/2.4.3/js/dataTables.scroller.js"></script>
<script src="https://cdn.datatables.net/scroller/2.4.3/js/scroller.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#myTable1, #myTable2').DataTable({
            paging: false,
            scrollCollapse: true,
            scrollY: '375px',
            scroller: true,
            deferRender: true,
            "columnDefs": [
                {"className": "dt-center", "targets": "_all"}
            ]
        });
    });
</script>

{% for table in tables %}
        <h4>{{ table.name }} Table</h4>
        <table id="myTable{{forloop.counter}}" class="display">
            <thead>
                <tr>
                    {% for header in table.data.headers %}
                        <th>{{ header }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in table.data.rows %}
                    <tr>
                        {% for header in table.data.headers %}
                            <td class="log-col">{{ row|dict_get:header }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
{% endfor %}