如何将 div 添加到数据表

Question

我想知道是否可以将 canvas 添加到数据 table。

我已经安装了 datatable 响应插件，如果列太宽，点击一个按钮可以让你看到额外的信息。

我想知道是否可以在隐藏区域添加一个canvas来播放与所选行相对应的音频。我想使用一个名为 wavesurfer.js

的不错的音频播放器

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

如何在隐藏区域末尾添加一个canvas
如果 table 有足够的 space
canvas必须补隐藏div100%

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

请参阅以下信息

<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() 方法。您可以将格式修改为 return a div，您可以在其中创建一个 canvas 使用 wavesurfer.js

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/

如何将 div 添加到数据表

How to add div to datatable

javascript

jquery

canvas

datatables