如何将div添加到datatable

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

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

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

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

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

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

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

https://jsfiddle.net/h26cxgc8/

Answer 1

在注释中提供的子行示例中使用format（）方法。 您可以修改格式以返回div，您可以使用wavesurfer.js创建canvas

 function format(d) { return '
'; } 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/