table responsive - image and on click event

michael19

Hello,

first of all - thanks for datatables - really good one!

I have a problem though...

I want to make a table and 2 last columns are crucial
last is image , with onclick event , which after click - adjust the text in previous column
so lets say when i click image - it increments the number from previous column...

here's the presentation - when screen is full size... all works fine - column Number is incremented on click
when it's hidden in responsive mode - it doesn't work any more
http://live.datatables.net/nigeyodo

Now after browsing all materials I understand that this hidden part is simply copied into <td class="child">
but then what is currently recommended way to edit it there ? and also having in mind that people can adjust screen size in between - so it can get back to full width mode - and the number which was adjusted - should be also there (not only in copied part)

I think - if i'm not mistaken - i need to play around with renderer mode (??) - to define my own "td class child" - I'm not sure though... here i copied from your documentation:
http://live.datatables.net/kiyuyuro
but if i play with it - i don't know what to do with this image - as it is not being shown - just empty space...

so honestly I'm lost

sorry for bit long explanation but I would really appreciate any help

Best,
Michael

colin

Hi @michael19 ,

This here is doing what you want. I've modified the code so that it's using the DataTables API to update the cell, and doing different things depending on whether the responsiveness has kicked in.

Hope that does the trick,

Cheers,

Colin

michael19

Woow.
Thank you very much @colin!!!
This is exactly what I wanted to do! I see I way over complicated it.
Thanks!

If I may - I'd like to ask for advise.

I'd like to change the class of the image (for example to change color etc), that I'm using here (in last column - the one that I click)...

$(this).closest('tr').find('.category-icon').className = 'myclass1';
$(this).className = 'myclass1';
or something like that:
row.find('.category-icon').html("<img class='myclass1' id='favImg"+idFinalNumber+"'></div>");

but it doesn't work... I was testing this for responsive and not responsive option...

what's interesting when i do
console.log($(this).closest('tr').find('.category-icon'))

it finds this element that I'm searching for , but somehow any modifications are not possible

Thank you again and all the best,
Michael

michael19

OK - I should have read closer what you did and I would know the answer.
So all clear and working fine

solution is of course using data() as you did...
so for example
table.cell($(this).parent()).data("<img class='myclass1' >")
So Colin - thank you again - you really helped me!