如何将div添加到数据表

Question

我想知道是否可以将画布添加到数据表中。

我已经安装了数据表响应插件，如果列太宽，单击按钮将允许您查看额外信息。

我想知道是否可以在隐藏区域添加画布以播放与所选行对应的音频。我希望使用名为wavesurfer.js

的漂亮音频播放器

为了能够做到这一点，我需要学习以下内容：

• 如何在隐藏区域的末尾添加画布
• 如果表格有足够的空间，如何强制响应表不显示画布
• 画布必须填充隐藏的div 100％

我想要实现的图片（每行是一个音频文件）

请参阅以下内容以获取您的信息

<div id="demo">
   <div id="waveform">
      <div class="progress progress-striped active" id="progress-bar" style="display: none;">
         <div class="progress-bar progress-bar-info" style="width: 100%;"></div>
      </div>
      <wave style="display: block; position: relative; -webkit-user-select: none; height: 128px; overflow-x: auto; overflow-y: hidden;"><canvas width="870" height="128" style="position: absolute; z-index: 1; top: 0px; bottom: 0px; width: 870px;"></canvas><wave style="position: absolute; z-index: 2; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right-style: solid; border-right-width: 1px; border-right-color: navy;"><canvas width="870" height="128" style="width: 870px;"></canvas></wave></wave>
   </div>
</div>

https://jsfiddle.net/h26cxgc8/

Answer 1

使用child rows example provided in comments中的format（）方法。您可以修改格式以返回可能使用wavesurfer.js

创建画布的div

function format(d) {
  return '<div class="player"></div>';
}
var table = $('#example').DataTable({
  "columns": [{
    "className": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": '+'
  }, {
    "data": "Name"
  }, {
    "data": "Position"
  }, {
    "data": "ID"
  }]
});
$('#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');
  }
});

这是一个演示 http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/