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>

/

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

• javascript
• jquery
• canvas
• datatables

Share Improve this question Follow asked Jun 30, 2015 at 10:02 QGAQGA 3,19277 gold badges4343 silver badges6464 bronze badges 7

• Set display:none in canvas styling and u can save canvas data to database using canvas.toDataURL() which returns a base64 string which cn be stored into DB :) – AkshayJ Commented Jun 30, 2015 at 10:10
• Each row is an audio stored in a directory. The canvas is created by the wavesurfer.js. Let's put it in another way. How do you add a div using javascript where I put the player? – QGA Commented Jun 30, 2015 at 10:19
• You mean each row represents an audio ?...Whats the use of canvas here??You can easily add a div by setting its innerHTML and appending it to the DOM :) – AkshayJ Commented Jun 30, 2015 at 10:26
• Getting there :) how can I do that, any example? – QGA Commented Jun 30, 2015 at 10:27
• just found this: datatables/examples/api/row_details.html – QGA Commented Jun 30, 2015 at 10:34

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 2

Use the format() method in the child rows example provided in ments. 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/dhirajbodicherla/189Lp6u6/16/