如何使用jQuery datatables和row-child构建表

我将jquerydatatable与Ajax一起使用。带有Laravel的服务器返回一个JSON，格式如下：

{
"draw":0,
"recordsTotal":201
,"recordsFiltered":201,
"data":[{
"id":"1",
"numsocio":"1",
"identificacion":"9999999999",
"nombre":"Anna,
"apellidos":"Desclau", ........ etc

我想构建一个这样的表（3行示例）

我正在使用

$(document).ready(function () {
    $('#socios_datatable').DataTable({
        ajax: '{{ route('socios.datatable') }}',
        columns: [
            { data: 'foto' },
            { data: 'nombre' },
            { ... }    
        ]
    });
});

我一直在测试信息帖子，但我没有让它发挥作用。如何使用2个子窗口轻松构建一行？我发现jquerydatatables非常适合于一行多列，但对于更复杂的行则很困难

---

有人能帮我吗？

我强烈建议使用以显示额外信息

不幸的是，jquerydatatables在表体中不正式支持

ROWSPAN

和

COLSPAN

属性

然而，有一个解决办法。但是它有一些限制，您将无法使用大多数DataTables扩展，搜索/排序需要被禁用并调整以正确工作

可以使用插件模拟

ROWSPAN

属性，有关详细信息，请参阅文章

可以使用隐藏单元格的技巧模拟

COLSPAN

属性，有关详细信息，请参阅文章

如果我们结合上述两种解决方法，则可以同时对单元格进行垂直和水平分组

例如，通过Ajax接收数据的场景示例代码可能如下所示：

var table = $('#example').DataTable({
   'ajax': 'https://api.myjson.com/bins/pr6dp',
   'columnDefs': [
      {
         'targets': [1, 2, 3, 4, 5],
         'orderable': false,
         'searchable': false
      }
   ],
   'rowsGroup': [0],
   'createdRow': function(row, data, dataIndex){
      // Use empty value in the "Office" column
      // as an indication that grouping with COLSPAN is needed
      if(data[2] === ''){
         // Add COLSPAN attribute
         $('td:eq(1)', row).attr('colspan', 5);

         // Hide required number of columns
         // next to the cell with COLSPAN attribute
         $('td:eq(2)', row).css('display', 'none');
         $('td:eq(3)', row).css('display', 'none');
         $('td:eq(4)', row).css('display', 'none');
         $('td:eq(5)', row).css('display', 'none');
      }
   }      
});   

有关代码和演示，请参阅

---

有关详细信息，请参阅文章。

您忘记添加此项<代码>$（'#示例tbody'）。在（'click'，'td.details control'，函数（）{var tr=$（this）.closest（'tr'）；var row=table.row（tr）；if（row.child.isShown（））{//此行已打开-关闭它row.child.hide（）；tr.removeClass（'shown'）；}else{//打开此行row.child（格式（row.data（））.show（）；tr.addClass（'show'）；}}）；ensenia mas code si quieries mas ayuda。（如果需要更多帮助，请显示更多代码）我不想打开或关闭行…我只想像一个colspan@davidkonrad，如果可以禁用排序，colspan功能有一个解决方法。@davidkonrad，我将尝试给出一个答案，它只需要一些时间创建一个工作示例。干得好！！！：）但恕我直言，这只是一个表面的解决方案，您必须提供每行使用两个JSON，在修饰样式之后，您可以在代码中插入一个示例。我想，将子内容作为详细信息/额外行插入嵌套JSON并不难。我认为，如果您希望在每行上方放置一个标题，这是非常好的。顺便说一句，请参阅您的观点，其中包含指向同一URL的多个链接，带有diff不同的锚文本，但我相信第一个锚文本实际上具有重要性/为您的站点提供关键字值。@davidkonrad，可能很难插入第二行详细信息并与RowsGroup插件兼容。我的解决方案可能对需要jQuery DataTables支持的普通表用途有限。