jquery - 如何使用带有行子级的 jQuery 数据表构建表

Question

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

我一直在测试 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文章了解更多详细信息。