DataTables с colspan, Warning: запрошенный неизвестный параметр

Question

У меня есть представление, которое отображает модель в таблице. Я использую Razor для отображения таблицы при первой загрузке страницы.

Я хочу использовать плагин DataTables.net, чтобы применить сортировку и создать собственную фильтрацию. Я применяю плагин, как так:

var researchTable = $("#research-docs").DataTable({}); 

При загрузке страницы я получаю модальное ошибку:

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

Мой Бритва Код:

<table id="research-docs" class="table table-hover table-striped table-library-research"> 
<thead> 
    <tr> 
     <th>Date</th> 
     <th width="250">Title</th> 
     <th>Sector</th> 
     <th>Analyst</th> 
     <th width="70">&nbsp;</th> 
    </tr> 
</thead> 
<tbody> 
    @foreach (var research in Model.Research) 
    { 
     <tr class="clickable"> 
      <td>@research.Date.ToString("dd.MM.yy")</td> 
      <td><strong>@research.Title</strong><br>@research.SubTitle</td> 
      <td> 
       @foreach (var sector in research.Sectors) 
       { 
        <a href="/sector/@sector.SectorId">@sector.Name</a> 
       } 
      </td> 

      <td> 
       @foreach (var analyst in research.Analysts) 
       { 
        <a href="/analyst/@analyst.AnalystId">@analyst.Name</a><br> 
       } 
      </td> 
      <td><span class="pull-right clickable"><i class="fa fa-plus"></i></span> <i class="fa fa-file-pdf-o"></i></td> 
     </tr> 
     <tr class="collapse"> 
      <td>&nbsp;</td> 
      <td colspan="4">@research.Body</td> 
     </tr> 
    } 
</tbody> 
</table> 

Единственное, что я думаю, что это может быть в том, что у меня есть свернутый ряд, который, как предполагается, появится, если нажать на иконку плюс (т.е. там, где он будет отображать @ research.Body). DataTables.net не похоже на строки, которые используют colspan. Может быть.

Я также думал, что это могло бы быть лучше, чтобы определить данные, которые я хочу показать в явном виде:

var researchTable = $("#research-docs").DataTable({ 
    "columns": [ 
     { "data": "Date" }, 
     { "data": "Title" }, 
     { "data": "sector.Name" }, 
     { "data": "analyst.Name" }, 
     { 
      "orderable": false, 
      "data": null 
     } 
    ], 
    "order": [[0, 'desc']] 
}); 

Это привело к ошибке, указывающее мой код (где название сектора я получить для каждого сектора) является некорректным:

Как я могу получить плагин для работы при первой загрузке страницы? Я понимаю, что мне придется подключить некоторые Ajax, чтобы позже применить фильтрацию.

Answer 1

Я смотрел дальше в DataTables.NET и первая ошибка, я получаю, потому что:

There is a colspan or rowspan in the tbody of the table, which is not supported by DataTables.

Это поддерживает в теории, которую я сделал в оригинальный вопрос (Gyrocode.com также поддержал это в своем ответе). Аллан (автор DataTables.NET) далее поясняет, что для этого нет обходного пути и имеет «such a feature would need to be embeded into DataTables core.»

Что такое облом, так как мой код действителен HTML. Наличие строки с colspan должно быть удовлетворено библиотекой - я был бы удивлен, если бы я был единственным, кто боролся с этим.

Так, чтобы заставить его работать, я должен был удалить следующую строку с точки зрения:

<tr class="collapse"> 
    <td>&nbsp;</td> 
    <td colspan="4">@research.Body</td> 
</tr> 

Вместо этого я должен был использовать вызов JQuery Ajax, чтобы получить поле «Body» мне нужно, используя следующий код :

$('#research-docs tbody').on('click', 'td.show-body', function() { 
    var tr = $(this).closest('tr'); 
    var row = researchTable.row(tr); 
    var documentId = tr.attr('id'); 

    if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } 
    else { 
     var documentObjDTO = "{ 'documentId': " + documentId + "}"; 
     var ajaxOptions = { 
      type: "POST", 
      url: "/GetResearchDocBody", 
      contentType: "application/json; charset=UTF-8", 
      dataType: "json", 
      data: documentObjDTO 
     }; 

     $.ajax(ajaxOptions) 
      .done(function (response) { 
       var bodyRow = '<tr><td>&nbsp;</td><td colspan="4">' + response.Research[0].Body + '</td></tr>'; 
       row.child(bodyRow).show(); 
       tr.addClass('shown'); 
      }); 
    } 
}); 

Это модифицированная версия примера Child rows (show extra/detailed information. Мне не нравится это решение, но это ограничение, за которое я застрял.

Теперь я могу перейти к фильтрующей/поисковой части проблемы.

Answer 2

Похоже, что «сектор. Имя» не существует в DOM. Вы пробовали удаление определения явных столбцов и просто initalizing плагиных, как это:

var researchTable = $("#research-docs").DataTable({ 
    "order": [[0, 'desc']] }); 

Вы создали пять столбцов в и вы заселение их всех от вашей модели так явное объявление может быть излишним.

Answer 3

Основная проблема заключается в том, что библиотека DataTables не поддерживает rowspan и colspan атрибутов для <td> элементов. Альтернативное решение - отображать данные строки, как показано в this example.

Также вы не должны использовать имена в свойстве columns.data, это необходимо только для обработки данных AJAX или на стороне сервера. Вместо статических данных следует использовать индексы на основе нуля.

Ваш код инициализации должен быть:

var researchTable = $("#research-docs").DataTable({ 
    "columns": [ 
     { "data": 0 }, 
     { "data": 1 }, 
     { "data": 2 }, 
     { "data": 3 }, 
     { 
      "orderable": false, 
      "data": 4 
     } 
    ], 
    "order": [0, 'desc'] 
}); 

или может быть упрощена, если вы корректируете поведение только 5-й колонке:

var researchTable = $("#research-docs").DataTable({ 
    "columnDefs": [ 
     { 
      "orderable": false, 
      "targets": 4 
     } 
    ], 
    "order": [0, 'desc'] 
});