如何添加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屋!