Responsive details renderer not working
Responsive details renderer not working
Hi,
I appreciate any help ya'll can offer.
Link to test case -https://dev.americasstrongestgym.com/leaderboard.html:
Debugger code enogal:
When attempting to use the responsive details renderer nothing happens. I actually have several columns to add - featuring scores of specific events once I get it to work with the website. Was also trying to make the website into a link (before I hid the data). However when I used tried adding it to column defs it broke the entire code and no data was visible.
"columnDefs": [ {
"targets": 1,
"render": function ( data, type, row, meta ) {
return '<a href="'+row[2]+'">'+data+'</a>';
}
} ]
Thanks
Answers
Your test case seems to run correctly. I don't see where you added the above code to cause the issue. Guessing you added a second
columnDefs
?? Add this code to the current `-option columnDefs:You have
responsive:true,
andresponsive.details
. You should have only one as one will overwrite the other. Remove theresponsive:true,
if you want the -option responsive.details`.If you still have issues look at the browser's console for errors. We will need to see the issue to help debug.
Kevin
Thanks for the help. I removed the render true so there is only. It is still not showing the hidden column. I did add the code under the existing column def, tried it again by pasting the code you supplied and it did not break anything. I think I had a may have had a comma out of place (my usual).
It seems to work for me as well. The window needs to be super narrow for Responsive to kick in though:
Is that not what you expect?
Allan
Thanks. I appreciate it. Only It is not doing what I need. I hid a column. I want 0-4 to show always and the hidden column 5 to show in responsive. Column 5 remains hidden even in this example.
Just added the rest of the data and abandoned the idea of hiding anything since responsive is in fact working - I will take that as a win. Thanks for the help to everyone that responded.
If you want a specific column to be hidden, use
columns.visible
to hide it from the main DataTable and Responsive.If you want a column to be hidden from the main table, but not Responsive, you can assign that column the
none
special class for that column.Allan