CODEWITHSUNDEEP
javascriptjquerycanvasdatatables
QGA
QGA

Reputation: 3192

How to add div to datatable

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:

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

enter image description here 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/

Upvotes: 1

Views: 12914

Answers (1)

Dhiraj
Dhiraj

Reputation: 33618

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/

Upvotes: 2

Related Questions