Customize colVis to be a check box list instead of a dropdown?

alexk829

I'm trying to create a comparison table. Essentially the user selects up to 5 objects to compare and they are brought to a comparison page. At the top of each column there should be a checkbox to display. There's no way to recover an object once it has been made invisible (spec by client, not my choice). Here's a screenshot of what it should look like:
http://ivorywargames.com/gallery/example.png

if you can help me or point me towards a discussion about this that has already happened, I'd really appreciate it.
Thank you,
Alex

allan

Hi Alex,

I'd suggest just using the fnSetColumnVis API method directly, rather than going through the ColVis plug-in for this. You can see an example of the API method in action here: http://datatables.net/release-datatables/examples/api/show_hide.html

Allan

alexk829

I will definitely look into this. It looks like this is exactly what I was looking for.

Thank you,
Alex

alexk829

That worked perfectly. Thank you.

One more question on that which is: how do I get it not to re-draw the table? I've got it CSSed to have each column be a certain width and ideally, the removed columns would cause the others (not the first) to move to the left, but now it removes the table width and ruins the style.

Thanks for the help,
Alex

allan

So the table is expanding to fill the gap of the departed column, and you don't want it to do that - is that correct? If the table is expanding, then I suspect you have table { width: 100% } (or similar) somewhere in your CSS.

Allan

alexk829

The table is set at 980px wide. When I remove one column, the width of the table is reduced to 506px (no matter how many I remove). One column of the 6 is set to not be removable and width:120px. After all removable columns are, the width of the table (and the last column) are 506px. I'd like the table to remain at 980 and that col to remain at 120, but I'm not sure what to specify in order to prevent the re-sizing.

allan

In that case, you probably want to add table { width: 100% } to your CSS. Also make sure you are using the latest version of DataTables.

Allan