如何添加div到datatable [英] How to add div to datatable

问题描述

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

我安装了datatable响应式插件，如果列太宽度，点击按钮将允许您查看额外的信息。

我想知道是否可以添加一个画布到隐藏区域，以播放对应于所选行的音频。我希望使用一个名为

解决方案

使用<在评论中提供的href =http://www.datatables.net/examples/api/row_details.html =nofollow>子行示例。您可以修改格式以返回一个div，您可以使用wavesurfer.js创建一个画布

 函数格式
 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（））{
 //此行已经打开 - 关闭它
 row.child .hide（）; 
 tr.removeClass（'shown'）; 
} else {
 //打开此行
 row.child ）.show（）; 
 tr.addClass（'shown'）; 
} 
}）; 
  

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

I would like to know whether it is possible to add a canvas to a datatable.

I have installed the datatable responsive plugin which, in case the column is too width, clicking a button will allow you to see extra information.

I would like to know whether I can add a canvas to the hidden area in order to play an audio which correspond to the selected row. I wish to use a nice audio player called wavesurfer.js

To be able to do do that I need to learn the following:

• How to add a canvas at the end of the hidden area
• How to force the responsive table to not display the canvas in case the table has enough space
• The canvas has to fill the hidden div 100%

Picture of what I am trying to achieve (Each row is an audio file)

Please see the following for your information

<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/

解决方案

Use the format() method in the child rows example provided in comments. You can modify format to return a div into which probably you can create a canvas using 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');
  }
});

Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/

这篇关于如何添加div到datatable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！