使用复选框控制 DataTables 列的可见性

Question

我在用 数据表在我的刀片模板上动态呈现表格。我有一系列复选框，用户可以选中这些复选框以显示/隐藏表列。所有这些都非常有效。

这是我的模板的样子：

模板.blade.php

<table id="dataTables-report" class="table table-striped table-bordered table-hover">

</table>

这是我用来渲染表格的内容：

脚本.js

$('#dataTables-report').DataTable({

  ...

  columnDefs: [

      {

          targets: 0,

          title: 'Name',

          searchable: true,

          data: function (row, type, val, meta) {

              // return row.data;

          }

      },

      @if($report->order_date)

            {

                targets: 1,

                title: 'Order Date',

                searchable: false,

                data: function (row, type, val, meta) {

                    // return row.data;

                }

            },

       @endif

       @if($report->order_number)

            {

                targets: 2, // could be 1 if order date is not selected

                title: 'Order Number',

                searchable: false,

                data: function (row, type, val, meta) {

                    // return row.data;

                }

            },

       @endif

      ...

});

“订单日期”是一个复选框，用户可以选择在表格上显示。如果选中，则显示该列。否则它不会。有可能首先选择不同的列，它可能是targets: 1。现在，如果用户选中另一个框，则targets需要动态设置为下一个数字。在这种情况下：targets: 2。

每个复选框都作为它自己的列存储在数据库中，所以我认为我不能做任何类型的循环（因此是一堆 if 语句）。否则，我认为这样的事情会奏效。

有没有办法targets在我的刀片模板中动态生成数字？

Answer 1

这是我在进一步研究您的建议时提出的“快速”解决方案。在我的刀片模板中，我创建了一个可以在我的 php.ini 中访问的全局变量。@section('scripts')&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; $(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let columnTarget = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#dataTables-report').DataTable({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;columnDefs: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;targets: columnTarget,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: 'Name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;searchable: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: function (row, type, val, meta) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// return row.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@if($report->order_date)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;targets: ++columnTarget,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: 'Order Date',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;searchable: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: function (row, type, val, meta) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // return row.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@endif&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@if($report->order_number)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;targets: ++columnTarget,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: 'Order Number',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;searchable: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: function (row, type, val, meta) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // return row.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@endif&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; </script>@endsection这似乎运作良好；正确（动态）分配targets值。

Answer 2

->addColumn('action', function ($floor) {&nbsp; &nbsp; $action=&nbsp;&nbsp;&nbsp; &nbsp; @Can("floor-edit"){"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class='btn btn-info&nbsp; btn-sm'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;href=".route("floor.edit",Crypt::encrypt($floor->id))."><i class='fa fa-edit'></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type='button' name='delete' id=".Crypt::encrypt($floor->id)." class='delete btn btn-danger btn-sm'><i class='fa fa-trash'></i></button>&nbsp; &nbsp;"};&nbsp; &nbsp;return $action;})