如何在页面上获取数据表的所有实例答案

【问题标题】：How to get all instances of dataTables on page如何在页面上获取数据表的所有实例
【发布时间】：2019-06-13 18:33:37
【问题描述】：

我有一个网页，上面有多个数据表，使用最新的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>

我在文档中读到，为了初始化页面上的所有表，我可以在 jquery 数组上创建调用 DataTable()，所有表都将被实例化。这行得通。

$(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();
  }
})

但是，我所有的表都在 bootstraps collapsibles 中，这意味着当折叠关闭时数据表无法计算出创建时的宽度。因此我调用我的函数 reCalc()（见代码）。

然而，奇怪的是 $.fn.dataTable.tables() 只返回页面上的最后一个表，因此只有最后一个表是响应式的。我希望它返回所有表格（请参阅docs）。

我是否遗漏了一些明显的东西？

【问题讨论】：

请尝试发布（最小）可执行示例。您可以在 StackOverflow sn-p 中包含 Bootstrap 和 DataTables 以及您需要的任何其他内容。

标签： jquery twitter-bootstrap datatables responsive

【解决方案1】：

也许官方文档中的这个页面可以提供帮助：https://datatables.net/reference/api/%24.fn.dataTable.tables()

$.fn.dataTable
    .tables( { visible: true, api: true } )
    .columns.adjust();

//example 2

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $.fn.dataTable
            .tables( { visible: true, api: true } )
            .columns.adjust();
    })

【讨论】：