jQuery Column Toggle
Use this plugin for auto add show/hide to table columns. This plugin will append a div after table, with all links allow show/hide columns of that table.
The visible status will be persistant because it will store status in localStorage. So, if after hide a column, if user refresh (F5) the browser, the hidden columns will still be hidden.
Screenshot
Installation
Install Javascript file
... <script src="jquery.columntoggle.js"></script> .... Install CSS file:
... <link rel="stylesheet" href="jquery.columntoggle.css" /> ... Usage
You can call .columntoggle() function to table selectors to init this plugin.
Example:
... $('.mytable').columntoggle(options); ... Options
This plugin need an option object with following properties:
toggleContainerClass: class name of toggle container.
toggleLabel: Text will be displayed in toggle box. Default: Show/Hide columns:
key: The key will be saved to localStorage, to distinct with other tables of your site. If empty, it will be your site URL. (window.document.href)
keyPrefix: The prefix will be prepended before the key in localStorage.
Notes
In some cases, table header (thead > tr > th) may contain unwanted text, so, the auto generated column name in the toggle container will display incorrect.
You can specify the text for that column with attribue data-collumntoggle to that column (thead > tr > th). Example:
<table class="mytable"> <thead> <tr> <th>ID</th> <th data-columntoggle="Company">CID</th> <th>Name</td> </tr> </thead> ... <tbody> </tbody> </table> Requirement
Tables use this plugin must have <thead> for table header.
Full Example
... $('.mytable').columntoggle({ toggleContainerClass: "my-container-class", toggleLabel: "Toggle table columns: ", keyPrefix: "mysite-", key: "company" }); ... 
