Фиксированный столбец DataTables с группами - PullRequest
Новая
       60

Фиксированный столбец DataTables с группами

0 голосов
/ 06 августа 2020

У меня есть таблица, которая должна делать 2 вещи: группировать по столбцу и иметь фиксированный левый столбец.

Для групп у меня есть обратный вызов, который вводит новую строку в таблицу с название группы. Все элементы в этой строке до следующей группировки принадлежат этой группе. 

drawCallback: function() {
    var api = this.api();
    var rows = api.rows({page: 'current'}).nodes();
    var last = '';

    api.column(0, {page: 'current'}).data().each((group, i) => {
      if (last != group) {
        $(rows).eq(i).before(`
          <tr>
              <td colspan='100%' class='bg-table-gray'>${group}</td>
          </tr>
          `);
        last = group;
      }
    });
}

Для фиксированного столбца я использую расширение DataTables FixedColumn . 

fixedColumns: { leftColumns: 2 }

Оба из них работают по отдельности, но при объединении я получаю ошибку Cannot read property 'anCells' of undefined. 

seedTable();

$(`#ExampleTable`).DataTable({
  searching: false,
  lengthChange: false,
  ordering: true,
  bInfo: false,
  paging: false,
  scrollX: '150px',
  scrollY: '150px',
  fixedColumns: { leftColumns: 2 },
  columnDefs: [
      {"width": "40px", "targets": "_all"},
      {"visible": false, "targets": 0}
  ],
  drawCallback: function() {
    var api = this.api();
    var rows = api.rows({page: 'current'}).nodes();
    var last = '';

    api.column(0, {page: 'current'}).data().each((group, i) => {
      if (last != group) {
        $(rows).eq(i).before(`
          <tr>
              <td colspan='100%' class='bg-table-gray'>${group}</td>
          </tr>
          `);
        last = group;
      }
    });
  }
});


// seed table with random data for this example.
function seedTable() {
  for (var i = 0; i < 20; i++) {
    $(`thead tr`, `#ExampleTable`).append(`<th>h ${i}</th>`);
  }
  
  for (var i =0; i < 4; i++) {
    var row = $(`<tr></tr>`)
    $(row).append($(`<td>group ${i%2 + 1}</td>`));
    for (var ii = 0; ii < 19; ii++) {
      $(row).append($(`<td>${ii}</td>`));
    }
    $(`tbody`, `#ExampleTable`).append(row);
  }
}
.bg-table-gray{
  background-color: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.dataTables.min.css" rel="stylesheet" />


<table id='ExampleTable' class="table">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>
...