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

Posted 2023-03-14

【中文标题】如何使用带有行子级的 jQuery 数据表构建表

【英文标题】：How to build a table with jQuery datatables with row child

【发布时间】：2018-04-16 11:32:56

【问题描述】：

我正在使用带有 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 数据表非常适合具有多列的一行，但对于更复杂的行则很难。

有人可以帮帮我吗？

【问题讨论】：

你忘了添加这个。 $('#example tbody').on('click', 'td.details-control', function () var tr = $(this).closest('tr'); var row = table.row( tr ); if ( row.child.isShown() ) // This row is already open - close it row.child.hide(); tr.removeClass('shown'); else // Open this row row.child( format(row.data()) ).show(); tr.addClass('shown'); );

ensenia mas 代码 si quieries mas ayuda。 （如果您需要更多帮助，请显示更多代码）

我不想打开或关闭行...我只想像 colspan 一样做

@davidkonrad，如果可以禁用排序，则有一个 colspan 功能的解决方法。

@davidkonrad，我会尝试给出答案，它只需要一些时间来创建一个工作示例。

【参考方案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 文章。

【讨论】：

干得好！！！ :) 但从各方面来说，它只是一个装饰性解决方案，您必须为每一行提供双 JSON，并且在装饰性样式之后，您可以 在代码中插入例如 。我想将带有子内容的嵌套 JSON 作为详细信息/额外行插入并不难。如果您想在每一行上方放置一个标题，我认为这非常好。顺便说一句，通过指向具有不同锚文本的同一 URL 的多个链接来查看您的观点，但我相信第一个锚文本是真正具有重要性/赋予您网站关键字价值的锚文本。 @davidkonrad，可能很难插入带有详细信息的第二行并与 RowsGroup 插件兼容。我的解决方案可能对需要 jQuery DataTables 支持的普通表的使用有限。