如何使用Datatables在dom：'Bfrtip'的下载内容中包含rowchild行

问题描述

我正在使用dom: 'Bfrtip'按钮将复制和Excel按钮添加到我的数据表中。但是，我的数据表还包含隐藏的row().child，当我单击按钮时不会被复制。如何在“复制”功能中包括子行？这是我正在使用的代码：

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:30px;">'+
        '<tr>'+
            '<td>col5:</td>'+
            '<td style="word-break:break-all;">'+d.col5+'</td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#myDataBase').DataTable( {
              dom: 'Bfrtip',buttons: [
            'copyHtml5','excelHtml5','pageLength'
        ],"pagingType": "full_numbers","idisplayLength": 25,"ajax": "./myDataBase_objects.json","columns": [
            {
                "className":      'details-control',"orderable":      false,"data":           null,"defaultContent": ''
            },{ "data": "col1" },{ "data": "col2" },{ "data": "col3" },{ "data": "col4" }
        ],"order": [[1,'asc']]
    } );

源json如下，其中前4列显示在DataTable中，而col5不是：

{
    "data": [
        {
            "col1": "12","col2": "98.2","col3": "76","col4": "376","col5": "42,567"
        },{
            "col1": "11","col2": "92.2","col3": "70","col4": "306","col5": "22,]
}

解决方法

我已根据演示provided here得出了这个答案，但是使用了问题中的数据样本。

这是表格的样子，第一个子行展开了，只是为了显示子级中的数据：

任何子行可见还是隐藏都没关系-复制/粘贴将获取所有数据，无论如何。

这是DataTables脚本-请注意，我正在对该示例中的数据进行硬编码，而不是使用带有ajax的URL-但这不会更改复制/粘贴方法：

<script type="text/javascript">

var dataSet = [
        {
            "col1": "12","col2": "98.2","col3": "76","col4": "376","col5": "42,567"
        },{
            "col1": "11","col2": "92.2","col3": "70","col4": "306","col5": "22,567"
        }

];

function format ( d ) {
    return '<table cellpadding="5"><tr><td>' + d.col5 + '</td></tr></table>';
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',data: dataSet,"columns": [
            {
                "className":      'details-control',"orderable":      false,"data":           null,"defaultContent": ''
            },{ "data": "col1" },{ "data": "col2" },{ "data": "col3" },{ "data": "col4" }
        ],"order": [[1,'asc']],buttons: [
      {
        text: 'Custom Copy',action: function ( e,dt,node,config ) {
          // the column headings are here:
          var copyString = 'col1\tcol2\tcol3\tcol4\tcol5\n';

          table.rows().every( function () {
            // for each row,get the data items,separated by tabs:
            copyString = copyString + Object.values(this.data()).join('\t') + '\n';

          } );

          if (copyString !== undefined) {
            // create a textarea,write the data to it,then 
            // select it for copy/paste:
            var dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.setAttribute("id","dummy_id");
            document.getElementById("dummy_id").value = copyString;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
          }

        }
      }
    ]

    } );
     
    // Add event listener for opening and closing details
    $('#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');
        }
    } );
} );

</script>

单击Custom Copy按钮的结果是剪贴板包含表的所有数据。

当粘贴到一个空的Excel工作表中时，它看起来像这样：

工作原理：

由于所有数据项都在原始JSON对象中，因此每个表行都可以访问我们需要的所有数据，而无论如何在主行和子行之间进行拆分。

因此，按钮代码可以使用自定义函数来使用table.rows().every(...)访问所有这些数据。我们构建一个包含所有数据的字符串（copyString），并按制表符（\t和换行符（\n）分割。

最后，我们创建一个新的临时DOM元素-一个textarea，将文本放置在其中，以便可以将其复制到剪贴板。

一个缺点：没有向用户发送有关复制/粘贴事件的通知。您可以根据需要为此添加警报。

但是好处是：与现成的复制功能不同，这将查找所有数据。

datatables javascript