Show/Hide columns from a link/button?
-
Hi,
is it possible to create a link or button that hides/shows Tablepress columns?
For example, if I show a table with the columns 1-5. Then, I would like to add a link or button to the same page that shows the columns 6 and 7. Possible? 🙂Thanks in advance!
-
Hi,
you could maybe use this Extension: http://tablepress.org/extensions/datatables-colvis/
That will add the feature from this site to the table: http://datatables.net/extras/colvis/
(Notice the “Show/Hide Columns” button above the table.)To hide columns 6 and 7 initially, you can add this to the “Custom Commands” textfield on the “Edit” screen of the table:
"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 5,6 ] } ]Regards,
TobiasWov, this is just what I have been looking for 🙂
However, if I show as default columns 1-5 and hide initially columns 6-7. Is it possible to allow the user only to show/hide the initially hidden columns 6 and 7? I would not like to allow the user to hide for example columns 1-5.Hi,
yes, that’s possible with another parameter in the “Custom Commands”. Please try this:
"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 5,6 ] } ], "oColVis": { "aiExclude": [ 0,1,2,3,4 ] }Regards,
TobiasNice! I thank you again 🙂
Some styling is still to be done to the “button”, but that I can handle with the plugins CSS.One more question, can I move columns in the Tablepress Edit Table-view? For example, if I have added data to fifth column and now I would like to move the whole column after the second column. Or do I have to manually copy the values to a new column that I have created after the second column?
Hi,
good to hear that this will work! 🙂 Yes, just style this as necessary via CSS.
And yes, moving columns is easily possible: You can drag and drop them via the column name letter at the top. Just click and hold the mouse on that and move the column to the desired place.
Regards,
TobiasAnd how didn’t I notice that it was so easy 🙂
Hi,
I don’t know 🙂 But good to hear that everything is working now!
Best wishes,
TobiasHmmm… I’m having some problems with CSS. The plugin’s default CSS is not putting my column-names on one row, in the dropdown-list where the checkboxes are. The initially hidden column-names that I’m using are “+” and “-“.
I have tried to give more length to the “checkbox rows” but it will not work. The checkbox and the column-name are on different rows. According to HTML they are both inside of spans, so they should be on the same row… Any ideas?Hi,
I have never tried to work directly with that CSS, but if you post the link to the table, I’ll take a look.
Regards,
TobiasHi,
great, the table is here
and the Hide/Show-button is the “[+]” in the upper right corner of the first table. There should be the “+” and “-” beside the checkboxes, but I haven’t got it to work 🙁Thanks for taking a look!
Hi,
thanks for the link. I’m not sure what exactly causes this, but here’s some “Custom CSS” that at least shows the text next to the checkboxes, although it’s still not perfect:
.ColVis_Button { padding: 0px; } .ColVis_Button div { display: inline-block; vertical-align: top; text-align: center; width: 8px; } .ColVis_MasterButton { padding: 0 5px; }Regards,
TobiasHi,
thank you for your solution, but could you explain in a bit detail, in which file should that be added? I’ve tried in the
tablepress-datatables-colvis/css/ColVis.cssbut nothing changes on the webpage.Hi,
just put that into the “Custom CSS” of TablePress. That would be the easiest.
If you want to put it into a file, you’ll have to put it at the end ofColVis.cssandColVis.min.css.Regards,
TobiasAh, of course, so stupid of me 🙂
Thanks, I’ll try to manage from here now! The checkbox-row only needs a bit more width and then it’s perfect.Hi,
no problem 🙂 Good to see that this worked!
Best wishes,
Tobias
The topic ‘Show/Hide columns from a link/button?’ is closed to new replies.