Question

我有一个网页，上面有多个dataTable，使用最新的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可折叠内部，这意味着在关闭折叠时，数据表无法在创建时计算宽度。因此，我正在调用函数reCalc（）（请参见代码）。

但是，奇怪的是$ .fn.dataTable.tables（）仅返回页面上的最后一个表，因此只有最后一个表才响应。我希望它返回所有表（请参见docs）。

我缺少明显的东西吗？

Answer 1

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

const x = [{a: 1}, {b: 2}];
let found = x.find(el => el.a === 1);
if(found) found = {...found, a: ++found.a};
console.log(x); // [{a: 2}, {b: 2}];
console.log(found) // {a: 2}

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

1 个答案: