使用复选框控制 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')

    <script>

        $(function () {

            ...

            let columnTarget = 0;

            ...

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

                ...

               columnDefs: [

               {

                   targets: columnTarget,

                   title: 'Name',

                   searchable: true,

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

                       // return row.data;

               }

           },

           @if($report->order_date)

           {

               targets: ++columnTarget,

               title: 'Order Date',

               searchable: false,

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

                  // return row.data;

               }

           },

           @endif

           @if($report->order_number)

           {

               targets: ++columnTarget,

               title: 'Order Number',

               searchable: false,

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

                // return row.data;

               }

           },

           @endif

         ...

    </script>

@endsection

这似乎运作良好；正确（动态）分配targets值。

Answer 2

->addColumn('action', function ($floor) {

    $action=  

    @Can("floor-edit"){"

         <a class='btn btn-info  btn-sm' 

             href=".route("floor.edit",Crypt::encrypt($floor->id))."><i class='fa fa-edit'></i>

         </a>

         <button type='button' name='delete' id=".Crypt::encrypt($floor->id)." class='delete btn btn-danger btn-sm'><i class='fa fa-trash'></i></button>

   "};

   return $action;

})