如何在数据表中合并多行？答案

【问题标题】：How to combine multiple rows in datatables?如何在数据表中合并多行？
【发布时间】：2019-08-30 00:15:45
【问题描述】：

我有一个 json 数据，我正在尝试动态地添加到 jquery 数据表

我的 json 数据如下所示：

  details = [{info:'sdsd',sub:'dsdsd',otherinfo:'dsds'},{info:'gfdd',sub:'zzzzz',otherinfo:null},
 {info:'1212',sub:'34343',otherinfo:'dsdaw2'}]

我正在通过以下方式附加到我的数据表：

for(let i =0;i<details.length;i++){
      tableSummary.row.add($(`<tr><td>${details[i].info}</td><td>${details[i].sub}</td></tr>`)).draw()

     if(details[i].otherinfo){
           tableSummary.row.add($(`<tr><td>OTHER INFO</td><td>${details[i].otherinfo}</td><td></td></tr>`)).draw()
          }
}

正如您在我的 JSON 数据中看到的那样，otherinfo 有时可能为空。我想要显示信息的行和显示 2 个不同行的其他信息的行。但是，我希望它们被视为一个单一的实体。该表应该只允许基于信息行进行排序，并且搜索内容应该显示两行而不是仅一行。

基本上，我想组合 2 行，并且无论表格如何排序，都始终将它们组合在一起。有没有可能做到这一点？

【问题讨论】：

标签： jquery datatable

【解决方案1】：

也许你可以试试 Datatable 子行选项

像这样的

var jsonData = [{"info":"sdsd","sub":"dsdsd","otherinfo":"dsds"},{"info":"gfdd","sub":"zzzzz","otherinfo":null},
 {"info":"1212","sub":"34343","otherinfo":"dsdaw2"}];

function format ( d ) {
    var trs='';
    trs+='<tr><td>'+ (d.otherinfo != null ? d.otherinfo : "")+'</td></tr>';

    return '<table class="table table-border table-hover">'+
           '<thead>'+
              '<th>OTHER INFO</th>'+
           '</thead><tbody>' +

           trs+
        '</tbody></table>';
}
$(document).ready(function() {
    var table = $('#example').DataTable({
        "data": jsonData,
        "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "info"},
            { "data": "sub"}
        ]
    });


   $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        if ( row.child.isShown() ) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
    });
});

Working Fiddle

【讨论】：