Строка сведений DataTables без вложенности

Я пытаюсь сделать таблицу с вложенными данными внутри. Я хочу иметь один набор заголовков столбцов в верхней части таблицы и использовать их для всей таблицы. С этой целью я начал адаптировать пример сведений о строке для своих нужд. Код:

var table = this.$el.attr({
  'width': '100%',
  'class': 'table table-striped table-hover'
}).DataTable({
  data: data,
  autoWidth: true,
  paging: false,
  order: [[0,'asc']],
  columns: [
    {
      'width':15,
      'class':'details-control',
      'orderable':false,
      'data':null,
      defaultContent: '+'
    },
    {data:'term',title:'Item ID'},
    {data:'count',title:'Count'}
  ]
});

this.$el.find('tr.group').each(function(i){
  var $tr = $(this);
  var row = table.row($tr);
  console.log(row.data());
  row.child($.map(row.data().samples, function(sample){
    return $('<tr><td></td><td>Sample: '+sample.name+'</td></tr>');
   })).show();
});

Однако это вкладывает мои сгенерированные строки в один элемент <tr colspan="4"> следующим образом:

<tbody>
  <tr>
    <td class="details-control">+</td>
    <td>659A</td>
    <td>12</td>
  </tr>
  <tr>
    <td colspan="4">
      <tr>
        <td></td>
        <td>659A-27</td>
      </tr>
    </td>
  </tr>
</tbody>

Из-за элемента colspan мои дочерние строки не совпадают с родительскими строками. Например, я хочу, чтобы пустое число <td> совпадало со столбцом details-control в большой таблице, а 659A-27 — со столбцом Item ID.

Каким будет наименее неуклюжий способ избавиться от лишних <td colspan="4"><tr></tr></td> и сделать так, чтобы мои дочерние строки просто выровнялись с родительской таблицей?

Изменить: из документации (выделено мной):

Содержимое дочерних строк полностью не зависит от основной таблицы (кроме их положения в документе). Порядок, поиск и т. д., примененные к таблице, не влияют на порядок дочерних строк. Каждая дочерняя строка обычно содержит одну ячейку с атрибутом colspan, установленным на всю ширину таблицы, поэтому содержимое ячейки покрывает всю ширину таблицы. Однако также можно передать элемент tr с несколькими ячейками (по одной для каждого столбца в таблице), чтобы отобразить данные дочерних строк в той же структуре столбцов, что и в основной таблице.

В нем упоминается, что размещение дочерней строки в родительской структуре «также возможно» , но не описывается, как этого добиться, и, как описано выше, интуитивная попытка терпит неудачу. Это делает на самом деле опишите, как это сделать:

jQuery — объект jQuery с добавляемыми узлами. Если в наборе результатов jQuery есть несколько элементов, они добавляются в виде нескольких строк. Если узел является элементом tr, он рассматривается как дочерняя строка, в противном случае автоматически создаются строка и ячейка, и в них вставляется узел из набора результатов jQuery.

Однако он ничего не говорит о массивах элементов JQuery. Я закрою этот вопрос, так как это просто неподдерживаемая функция.


datatable jquery datatables jquery-datatables
person Ryan Kennedy    schedule 28.05.2014    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Я нашел исходный код детали создания в datatable. вы должны вернуть массив или объект jQuery.

function formatDetail(data) {
            var html = "";
            $.each(data, function () {
                html += "<tr><td>1</td><td>2</td></tr>";
            });

            return $(html);
        }
person Steve Yin    schedule 28.06.2015

arrow_upward
1
arrow_downward

У меня есть глупое решение, но оно работает

row.child('').show();
tr.addClass('shown');
var c = tr.next();
c.children().remove();
c.html (format(row.data()));
person user2625363    schedule 28.05.2014

arrow_upward
1
arrow_downward

Я пробовал то же самое, и после небольшого количества ошибок это решение отлично работает для меня.

Таблицы данных версии 1.10.16

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
  var data = this.data();
  //i use the data rendered on server side, which in my case are multiple tr. you can remove the data check if not needed ;) 
  if(data.childRow){
    this
      .child(
        //$(data.childRow)
        $('<tr><td>test</td></tr>')
      )
      .show();
  }
} );
person Xippo    schedule 16.10.2017