Как добавить div в datatable

Question

Я хотел бы знать, можно ли добавить холст в datatable.

Я установил datatable отзывчивый плагин, который, если столбец слишком широк, нажатие кнопки позволит вам увидеть дополнительную информацию.

Я хотел бы знать, могу ли я добавить холст в скрытую область, чтобы воспроизводить звук, соответствующий выбранной строке. Я хотел бы использовать хорошее аудио плеер под названием wavesurfer.js

Чтобы быть в состоянии сделать этого мне нужно узнать следующее:

• Как добавить холст в конце скрытой области
• Как чтобы заставить реагировать таблицу, чтобы не отображать холст в случае, если таблица имеет достаточно места
• холст должен заполнить скрытый Div 100%

картину того, что я пытаюсь achie в (Каждая строка представляет собой звуковой файл)

Пожалуйста, смотрите следующий за информацию

<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. Вы можете изменить формат, чтобы вернуть DIV, в который, вероятно, вы можете создать холст с помощью 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/