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"
});
...