Как получить все экземпляры dataTables на странице

Question

У меня есть веб-страница, на которой у меня есть несколько таблиц данных, используя самые последние https://datatables.net/.

HTML-код:

<div id="collapse{{ $oCategory->id }}" class="panel-collapse collapse">

                    <div class="panel-body">
                        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example" cellspacing="0">
                            <thead>
                            <tr>
                                <th>Product Name</th>
                                <th>Price</th>
                                <th>Current Inventory</th>
                                <th>Minimum Inventory</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>

                            @foreach ($oProducts->where('iCategoryId', $oCategory->id) as $i=>$oProduct)

                                <tr class="{{ (($i % 2) == 0) ? 'even' : 'odd' }}">
                                    <td>{{ $oProduct->sName }}</td>
                                    <td><i class="fa fa-euro"></i> {{ $oProduct->fPrice }}</td>
                                    <td>{{ $oProduct->getInventory() }}</td>
                                    <td>{{ $oProduct->getMinimumInventory() }}</td>
                                    <td>
                                        <a href="/inventory/product/{{$oProduct->id}}/edit"><i class="fa fa-edit text-primary"></i></a>
                                        <a href="/inventory/product/{{$oProduct->id}}/delete"><i class="fa fa-minus-circle text-danger"></i></a>
                                    </td>
                                </tr>

                            @endforeach


                            </tbody>
                        </table>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <a href="/inventory/category/{{$oCategory->id}}/product"><button class="btn btn-success">Add product</button></a>
                                {{--<button class="btn btn-success" id="addRow" onclick="addTableRow();">Add product</button>--}}
                                {{--<button class="btn btn-primary" id="saveButton" onclick="saveRow();" style="display: none;">Save</button>--}}
                            </div>
                            <div class="col-md-6 text-right">
                                <a href="/inventory/category/{{$oCategory->id}}/edit"><button class="btn btn-warning">Edit category</button></a>
                                <a href="/inventory/category/{{$oCategory->id}}/delete"><button class="btn btn-danger">Delete category</button></a>
                            </div>
                        </div>
                    </div>
                </div>

Я прочитал в документации, что для инициализации всех таблиц на моей странице я могу просто создать вызов DataTable () в массиве jquery, и все таблицы будут созданы. Это работает.

$(document).ready(function() {
  $('.table-striped').DataTable({
    responsive: true,
  });

  $('a[data-toggle="collapse"]').click(function (e) {
    setTimeout(reCalc, 200);
  });

  reCalc = function() {
    console.log($.fn.dataTable.tables());
    $.fn.dataTable.tables( { api: true } ).columns.adjust();
  }
})

Однако все мои таблицы находятся внутри разборных загрузочных загрузчиков, а это означает, что таблица данных не может определить ширину во время создания, когда сложение закрыто. Поэтому я вызываю свою функцию reCalc () (см. Код).

Однако странная вещь заключается в том, что $ .fn.dataTable.tables () возвращает только последнюю таблицу на странице, и, следовательно, только последняя таблица является отзывчивой. Я ожидаю, что он вернет все таблицы (см. документы ).

Я что-то упускаю из виду?