如何使用带行child的jQuery数据表构建表

Question

我在Ajax上使用jQuery数据表。使用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' },
            { ... }    
        ]
    });
});

我已经使用http://www.cscc.edu/_resources/app-data/datatables/examples/api/row_details.html中的信息帖进行了测试，但我还没有让它成功。如何轻松构建一个包含2个子行的行？我看到jQuery数据表对于具有多列的一行是完美的，但对于更复杂的行很困难。

愿任何人帮帮我吗？

Answer 1

我强烈建议您使用Child rows来显示额外信息。

不幸的是，jQuery DataTables在表体中没有正式支持ROWSPAN和COLSPAN属性。

但是，有一种解决方法。但它有一些限制，你将无法使用大多数DataTables扩展，并且需要禁用和调整搜索/排序才能正常工作。

可以使用RowsGroup插件模拟ROWSPAN属性，有关详细信息，请参阅jQuery DataTables: ROWSPAN in table body TBODY文章。

可以使用带隐藏单元格的技巧模拟COLSPAN属性，有关详细信息，请参阅jQuery DataTables: COLSPAN in table body TBODY文章。

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

例如，通过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');
      }
   }      
});   

请参阅this example以获取代码和演示。

有关详细信息，请参阅jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN文章。