Responsive details renderer not working

Responsive details renderer not working

bookdragonbookdragon Posts: 4Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943

    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:

    {
    "targets": 1,
    "render": function ( data, type, row, meta ) {
    return '<a href="'+row[2]+'">'+data+'</a>';
    }
    } ,
    

    You have responsive:true, and responsive.details. You should have only one as one will overwrite the other. Remove the responsive: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

  • bookdragonbookdragon Posts: 4Questions: 1Answers: 0

    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).

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    It is still not showing the hidden column

    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

  • bookdragonbookdragon Posts: 4Questions: 1Answers: 0
    edited May 8

    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.

  • bookdragonbookdragon Posts: 4Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

Sign In or Register to comment.