Collapse extension breaking point?

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, that’s not that easy and will require adding custom CSS classes to columns, via JavaScript. The example at https://www.ads-software.com/support/topic/defining-columns-to-collapse-1?replies=12 might be a good starting point.

Regards,
Tobias

OK, so I added this to the Custom Commands on the form edit page, and the collapse function completely disappeared. Admittedly this is pretty out of my comfort zone.

‘$(document).ready(function() { $(‘#4′).DataTable( { “ajax”: “../../../../4/ajax/data/objects.txt”, “columns”: [ { “data”: “date”, className: “all” }, { “data”: “lastname”, className: “all” }, { “data”: “firstnameeng”, className: “all” }, { “data”: “gender”, className: “all” }, { “data”: “age”, className: “all” }, { “data”: “firstnameheb”, className: “none” }, { “data”: “address”, className: “none” }, { “data”: “city”, className: “none” } , { “data”: “provstate”, className: “none” } , { “data”: “postalcode”, className: “none” }, { “data”: “email”, className: “none” }, { “data”: “phone”, className: “none” }, { “data”: “visitto”, className: “none” }, { “data”: “tocontact”, className: “none” }, { “data”: “jewish”, className: “none” }, { “data”: “shomershabbos”, className: “none” }, { “data”: “cohen”, className: “none” }, { “data”: “maritalstatus”, className: “none” }, { “data”: “height”, className: “none” }, { “data”: “smoker”, className: “none” }, { “data”: “havekids”, className: “none” }, { “data”: “datewithkids”, className: “none” }, { “data”: “education”, className: “none” }, { “data”: “occupation”, className: “none” }, { “data”: “agetomeet”, className: “none” }, { “data”: “shul”, className: “none” } , { “data”: “aliyahdate”, className: “none” }, { “data”: “aliyah”, className: “none” } , { “data”: “perfectdate”, className: “none” }, { “data”: “wkndactivity”, className: “none” } , { “data”: “relationship”, className: “none” }, { “data”: “goals”, className: “none” }, { “data”: “freetime”, className: “none” }, { “data”: “favourites”, className: “none” }, { “data”: “personality”, className: “none” }, { “data”: “photo1”, className: “none” }, { “data”: “photo2”, className: “none” }, { “data”: “photo3”, className: “none” }, { “data”: “comments”, className: “none” }, { “data”: “lookingfor”, className: “none” }, { “data”: “_submitted_”, className: “none” }, { “data”: “_fromaddress_”, className: “none” }, { “data”: “shadchan”, className: “all” } ] } ); } );’

Hi,

I’m afraid that that “Custom Command” is not what’s needed here ??

You would need something like

"columnDefs": [ { "className": "all", "targets": [ 0 ] }, { "className": "min-phone-l", "targets": [ 1 ] }, { "className": "min-tablet", "targets": [ 2 ] }, { "className": "never", "targets": [ 3 ] }, { "className": "desktop", "targets": [ 4 ] }, { "className": "none", "targets": [ 5 ] } ]

but with the actual values for “className” adjusted to what you want for the table, and extended for all columns, according to the documentation at https://datatables.net/extensions/responsive/classes

Regards,
Tobias

Sorry to keep stringing this out, Tobiaz.

So, am I doing this all in custom CSS? I think this just might be beyond me.

Hi,

no, it’s not “Custom CSS” (which would be added on the “Plugin Options” screen), but a “Custom Command” for the (external) DataTables JS library, which is added on the table’s “Edit” screen.

And yes, unfortunately, this does involve some code, but as I haven’t yet used that specific part myself, I can’t really help yet :-/

Regards,
Tobias