Контролировать видимость столбцов DataTables с помощью флажков

Question

Я использую datatables для динамического рендеринга таблицы в моем шаблоне блейда. У меня есть ряд флажков, которые пользователь может установить, чтобы показать / скрыть столбцы таблицы. Все это прекрасно работает.

Вот так выглядит мой шаблон:

template.blade.php

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

Вот то, что я использую для рендеринга таблицы:

scripts.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

Если вы ищете действительно динамическую видимость столбца, контролируемую флажками (как я понял вашу конечную цель), это может быть сделано для пользователя целиком за несколько строк jQuery.

Чтобы сделать это, вы можете просто

• добавить свойство исходного объекта каждого столбца как атрибут value к вашим <input> узлам:
• при событии change найдите столбец, который получен (используя метод column().dataSrc()) по свойству объекта, соответствующему значению флажка, на который нажали, и настройте видимость этого столбца (используя .column().visible() метод соответственно:

$('#checkboxWrapper').on('change', '[type="checkbox"]', event => {
  let colindex = null;
  dataTable.columns().every(function(){
    if(this.dataSrc() == $(event.target).val()) colindex = this.index();
  });
  dataTable.column(colindex).visible($(event.target).prop('checked')).draw();
});

Завершите демоверсию этой концепции, которую вы можете найти ниже:

//sample source data
const dataSrc = [
  {id: 1, item: 'apple', cat: 'fruit'},
  {id: 2, item: 'carrot', cat: 'vegie'},
  {id: 3, item: 'banana', cat: 'fruit'}
];

//extract all unique object keys from data source array
const checkboxes = [...new Set(dataSrc
  .map(item => Object.keys(item))
  .flat())];
//translate those into <input> nodes HTML
const checkboxesHtml = checkboxes.reduce((inputs, prop) => inputs += `<input type="checkbox" value="${prop}" checked>${prop}</input>`,'');
$('#checkboxWrapper').append(checkboxesHtml);

//initialize datatables
const dataTable = $('#example').DataTable({
  data: dataSrc,
  dom: 't',
  columns: checkboxes.map(prop => ({title: prop, data: prop}))
});

//control columns visibility with checkboxes
$('#checkboxWrapper').on('change', '[type="checkbox"]', event => {
  //grab column().index() that corresponds to checkbox value
  let colindex = null;
  dataTable.columns().every(function(){
    if(this.dataSrc() == $(event.target).val()) colindex = this.index();
  });
  //toggle selected column visibility
  dataTable.column(colindex).visible($(event.target).prop('checked')).draw();
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <div id="checkboxWrapper"></div>
  <table id="example"></table>
</body>
</html>

Answer 2

Спасибо за ваши предложения, вот то, что я придумал как «быстрое» решение, пока я изучаю ваши рекомендации.

В своем шаблоне блейда я создал глобальную переменную, к которой я мог получить доступ в своем php.

@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.