How to add div to datatable

How to add div to datatable

titaniumtitanium Posts: 6Questions: 2Answers: 0
edited June 2015 in Free community support

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 at the end (or at the begin ) of 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)

http://i.stack.imgur.com/Muxtd.png

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,116Questions: 1Answers: 10,397 Site admin

    I don't see there being a problem doing that in the child row. Have a look at this example.

    Allan

  • titaniumtitanium Posts: 6Questions: 2Answers: 0

    Thanks, sorry I didn't see that tutorial

  • titaniumtitanium Posts: 6Questions: 2Answers: 0
    edited June 2015

    Hi Allan,

    The challenge I am facing is that I am running this with the responsive plugin enabled.
    The format function is somehow conflicting with the responsive one.

    I have two + buttons at the beginning of each row

    Any thoughts on this?

  • allanallan Posts: 63,116Questions: 1Answers: 10,397 Site admin
    Answer ✓

    This is correct - at the moment the only option would be to disable Responsive's own child row display.

    Allan

  • titaniumtitanium Posts: 6Questions: 2Answers: 0

    My table has got 35 columns at the moment and I am using server side processing. What can I do to have two buttons in each row: one for the new rendered div and one for the responsive plugin?

    Is it something I can fix somehow or it cannot be done?

  • titaniumtitanium Posts: 6Questions: 2Answers: 0

    I managed to find a workaround. Could you please check this piece of code

    https://jsfiddle.net/28m3q10b/1/

  • allanallan Posts: 63,116Questions: 1Answers: 10,397 Site admin

    If it works, then it looks fine to me.

    Allan

This discussion has been closed.