How to init 2 tables in same HTML page?

JaydenACH

<div class="homepage-mainbody">
    <div class="homepage-topbody">
        <table id="table-1" class="table table-bordered stripped">
            <tbody></tbody>
        </table>
    </div>
    <div class="homepage-btmbody">
        <table id="table-2" class="table table-bordered stripped">
            <tbody></tbody>
        </table>
    </div>
</div>
<script>
    $(document).ready( function () {
        $('#table-1').DataTable({
            "orderCellsTop": true,
            "bAutoWidth": false,
            "ajax": "{{ url_for('table1') }}",
            "pageLength": 15,
            "lengthMenu": [15, 30, 45, 60],
            initComplete: function () {
              .... some code ....
            }
        });
        $('#table-2').DataTable({
            "orderCellsTop": true,
            "bAutoWidth": false,
            "ajax": "{{ url_for('table2') }}",
            "pageLength": 15,
            "lengthMenu": [15, 30, 45, 60],
            initComplete: function () {
                ..... some other code ....
            }
        })
    })</script>

without the initComplete function in both tables, the page displays the content as intended. once i put it into the code, only table 2 ran the initComplete code. Table 1 did not. How to go around this problem?

kthorngren

The initComplete function will run for each table. You can prove it by putting a console.log statement in each one. Maybe the code in the function isn't doing what you expect. For us to help we will need to se a running test case with the issue. Please post a. link to your page or a test case showing the problem.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin