├── Issue_template.txt
├── License.txt
├── README.md
├── bower.json
├── css
├── dataTables.colVis.css
└── dataTables.colvis.jqueryui.css
├── examples
├── .DS_Store
├── button_order.xml
├── exclude_columns.xml
├── group_columns.xml
├── index.xml
├── jqueryui.xml
├── mouseover.xml
├── new_init.xml
├── restore.xml
├── simple.xml
├── text.xml
├── title_callback.xml
├── two_tables.xml
└── two_tables_identical.xml
├── js
└── dataTables.colVis.js
└── make.sh
/Issue_template.txt:
--------------------------------------------------------------------------------
1 | ColVis has now been retired and replaced by the Buttons extension for DataTables: https://datatables.net/extensions . ColVis is no longer being developed in favour of its replacement.
2 |
--------------------------------------------------------------------------------
/License.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2010-2015 SpryMedia Limited
2 | http://datatables.net
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy
5 | of this software and associated documentation files (the "Software"), to deal
6 | in the Software without restriction, including without limitation the rights
7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | copies of the Software, and to permit persons to whom the Software is
9 | furnished to do so, subject to the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be included in
12 | all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Important - this is retired software
2 |
3 | Please note that ColVis has now been retired and replaced by the [Buttons extension](//datatables.net/extensions/buttons) which offers significant improvements and consistent styling and API integration with the rest of DataTables and the other extensions.
4 |
5 | It is strongly recommended that you upgrade is possible to Buttons with its column visibility module, and not to use ColVis in any new projects.
6 |
7 |
8 | # ColVis
9 |
10 | ColVis adds a button to the toolbars around DataTables which gives the end user of the table the ability to dynamically change the visibility of the columns in the table:
11 |
12 | * Dynamically show and hide columns in a table
13 | * Very easy integration with DataTables
14 | * Ability to exclude columns from being either hidden or shown
15 | * Save saving integration with DataTables
16 |
17 |
18 | # Installation
19 |
20 | To use ColVis, first download DataTables ( http://datatables.net/download ) and place the unzipped ColVis package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser.
21 |
22 |
23 | # Basic usage
24 |
25 | ColVis is initialised using the `C` option that it adds to DataTables' `dom` option. For example:
26 |
27 | ```js
28 | $(document).ready( function () {
29 | $('#example').dataTable( {
30 | "dom": 'C<"clear">lfrtip'
31 | } );
32 | } );
33 | ```
34 |
35 |
36 | # Documentation / support
37 |
38 | * Documentation: http://datatables.net/extensions/colvis/
39 | * DataTables support forums: http://datatables.net/forums
40 |
41 |
42 | # GitHub
43 |
44 | If you fancy getting involved with the development of ColVis and help make it better, please refer to its GitHub repo: https://github.com/DataTables/ColVis
45 |
46 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "datatables-colvis",
3 | "version": "1.1.2",
4 | "license": "MIT",
5 | "main": [
6 | "js/dataTables.colVis.js",
7 | "css/dataTables.colVis.css"
8 | ],
9 | "dependencies": {
10 | "jquery": ">=1.7.0",
11 | "datatables": ">=1.7.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/css/dataTables.colVis.css:
--------------------------------------------------------------------------------
1 |
2 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
3 | * ColVis styles
4 | */
5 | div.ColVis {
6 | float: right;
7 | margin-bottom: 1em;
8 | }
9 |
10 | button.ColVis_Button,
11 | ul.ColVis_collection li {
12 | position: relative;
13 | float: left;
14 | margin-right: 3px;
15 | padding: 5px 8px;
16 | border: 1px solid #999;
17 | cursor: pointer;
18 | *cursor: hand;
19 | font-size: 0.88em;
20 | color: black !important;
21 | white-space: nowrap;
22 |
23 | -webkit-border-radius: 2px;
24 | -moz-border-radius: 2px;
25 | -ms-border-radius: 2px;
26 | -o-border-radius: 2px;
27 | border-radius: 2px;
28 |
29 | -webkit-box-shadow: 1px 1px 3px #ccc;
30 | -moz-box-shadow: 1px 1px 3px #ccc;
31 | -ms-box-shadow: 1px 1px 3px #ccc;
32 | -o-box-shadow: 1px 1px 3px #ccc;
33 | box-shadow: 1px 1px 3px #ccc;
34 |
35 | /* Generated by http://www.colorzilla.com/gradient-editor/ */
36 | background: #ffffff; /* Old browsers */
37 | background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
38 | background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
39 | background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
40 | background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
41 | background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
42 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
43 | }
44 |
45 | .ColVis_Button:hover,
46 | ul.ColVis_collection li:hover {
47 | border: 1px solid #666;
48 | text-decoration: none !important;
49 |
50 | -webkit-box-shadow: 1px 1px 3px #999;
51 | -moz-box-shadow: 1px 1px 3px #999;
52 | -ms-box-shadow: 1px 1px 3px #999;
53 | -o-box-shadow: 1px 1px 3px #999;
54 | box-shadow: 1px 1px 3px #999;
55 |
56 | background: #f3f3f3; /* Old browsers */
57 | background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
58 | background: -moz-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* FF3.6+ */
59 | background: -ms-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* IE10+ */
60 | background: -o-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Opera 11.10+ */
61 | background: linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* W3C */
62 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
63 | }
64 |
65 | button.ColVis_Button {
66 | height: 30px;
67 | padding: 3px 8px;
68 | }
69 |
70 | button.ColVis_Button::-moz-focus-inner {
71 | border: none !important;
72 | padding: 0;
73 | }
74 |
75 | button.ColVis_Button:active {
76 | outline: none;
77 | }
78 |
79 |
80 | div.ColVis_collectionBackground {
81 | position: fixed;
82 | top: 0;
83 | left: 0;
84 | height: 100%;
85 | width: 100%;
86 | background-color: black;
87 | z-index: 1100;
88 | }
89 |
90 | ul.ColVis_collection {
91 | list-style: none;
92 | width: 150px;
93 | padding: 8px 8px 4px 8px;
94 | margin: 0;
95 | border: 1px solid #ccc;
96 | border: 1px solid rgba( 0, 0, 0, 0.4 );
97 | background-color: #f3f3f3;
98 | background-color: rgba( 255, 255, 255, 0.3 );
99 | overflow: hidden;
100 | z-index: 2002;
101 |
102 | -webkit-border-radius: 5px;
103 | -moz-border-radius: 5px;
104 | -ms-border-radius: 5px;
105 | -o-border-radius: 5px;
106 | border-radius: 5px;
107 |
108 | -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
109 | -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
110 | -ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
111 | -o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
112 | box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
113 | }
114 |
115 | ul.ColVis_collection li {
116 | position: relative;
117 | height: auto;
118 | left: 0;
119 | right: 0;
120 | padding: 0.5em;
121 |
122 | display: block;
123 | float: none;
124 | margin-bottom: 4px;
125 |
126 | -webkit-box-shadow: 1px 1px 3px #999;
127 | -moz-box-shadow: 1px 1px 3px #999;
128 | -ms-box-shadow: 1px 1px 3px #999;
129 | -o-box-shadow: 1px 1px 3px #999;
130 | box-shadow: 1px 1px 3px #999;
131 | }
132 |
133 | ul.ColVis_collection li {
134 | text-align: left;
135 | }
136 |
137 | ul.ColVis_collection li.ColVis_Button:hover {
138 | border: 1px solid #999;
139 | background-color: #f0f0f0;
140 | }
141 |
142 | ul.ColVis_collection li span {
143 | display: inline-block;
144 | padding-left: 0.5em;
145 | cursor: pointer;
146 | }
147 |
148 |
149 | ul.ColVis_collection li.ColVis_Special {
150 | border-color: #555;
151 | background: rgb(237,237,237); /* Old browsers */
152 | background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* Chrome10+,Safari5.1+ */
153 | background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(214,214,214,1) 77%, rgba(232,232,232,1) 100%); /* FF3.6+ */
154 | background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* IE10+ */
155 | background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* Opera 11.10+ */
156 | background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* W3C */
157 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
158 | }
159 |
160 | ul.ColVis_collection li.ColVis_Special:hover {
161 | background: #e2e2e2; /* Old browsers */
162 | background: -webkit-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
163 | background: -moz-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* FF3.6+ */
164 | background: -ms-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* IE10+ */
165 | background: -o-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* Opera 11.10+ */
166 | background: linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* W3C */
167 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
168 | }
169 |
170 |
171 | span.ColVis_radio {
172 | display: inline-block;
173 | width: 20px;
174 | }
175 |
176 | div.ColVis_catcher {
177 | position: absolute;
178 | z-index: 1101;
179 | }
180 |
181 | .disabled {
182 | color: #999;
183 | }
184 |
185 |
186 |
--------------------------------------------------------------------------------
/css/dataTables.colvis.jqueryui.css:
--------------------------------------------------------------------------------
1 |
2 | button.ColVis_Button,
3 | ul.ColVis_collection li {
4 | padding: 0.5em;
5 | }
6 |
7 | ul.ColVis_collection {
8 | margin: 0;
9 | padding: 0;
10 | overflow: hidden;
11 | z-index: 2002;
12 | }
13 |
14 | ul.ColVis_collection li {
15 | clear: both;
16 | display: block;
17 | text-align: left;
18 | margin: -1px 0 0 0;
19 | }
20 |
21 | ul.ColVis_collection li span {
22 | display: inline-block;
23 | padding-left: 0.5em;
24 | cursor: pointer;
25 | }
26 |
27 | div.ColVis_collectionBackground {
28 | position: fixed;
29 | top: 0;
30 | left: 0;
31 | height: 100%;
32 | width: 100%;
33 | background-color: black;
34 | z-index: 1100;
35 | }
36 |
37 |
38 | div.ColVis_catcher {
39 | position: absolute;
40 | z-index: 1101;
41 | }
--------------------------------------------------------------------------------
/examples/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DataTables/ColVis/321a74b9dd89adc8ecfa1d0ae37d69f9b539e03e/examples/.DS_Store
--------------------------------------------------------------------------------
/examples/button_order.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | colVis: {
11 | order: 'alpha'
12 | }
13 | } );
14 | } );
15 | ]]>
16 |
17 |
18 | Button ordering
19 |
20 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/exclude_columns.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | colVis: {
11 | exclude: [ 0 ]
12 | }
13 | } );
14 | } );
15 | ]]>
16 |
17 |
18 | Exclude columns from list
19 |
20 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/examples/group_columns.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | colVis: {
11 | exclude: [],
12 | groups: [
13 | {
14 | title: "Engine",
15 | columns: [ 0, 3 ]
16 | },
17 | {
18 | title: "Client",
19 | columns: [ 1, 2 ]
20 | }
21 | ]
22 | }
23 | } );
24 | } );
25 | ]]>
26 |
27 |
28 | Group columns
29 |
30 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/examples/index.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ColVis examples
5 |
6 |
7 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/examples/jqueryui.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
16 |
17 |
18 | jQuery UI styling
19 |
20 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/examples/mouseover.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | colVis: {
11 | activate: "mouseover"
12 | }
13 | } );
14 | } );
15 | ]]>
16 |
17 |
18 | Mouseover activation
19 |
20 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/examples/new_init.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
15 |
16 | `new` initialisation
17 |
18 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/restore.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | columnDefs: [
11 | { visible: false, targets: 2 }
12 | ],
13 | colVis: {
14 | restore: "Restore",
15 | showAll: "Show all",
16 | showNone: "Show none"
17 | }
18 | } );
19 | } );
20 | ]]>
21 |
22 |
23 | Restore / show all
24 |
25 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/examples/simple.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip'
10 | } );
11 | } );
12 | ]]>
13 |
14 |
15 | Basic initialisation
16 |
17 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/examples/text.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | "colVis": {
11 | "buttonText": "Change columns"
12 | }
13 | } );
14 | } );
15 | ]]>
16 |
17 |
18 | Custom button text
19 |
20 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/examples/title_callback.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | "colVis": {
11 | "label": function ( index, title, th ) {
12 | return (index+1) +'. '+ title;
13 | }
14 | }
15 | } );
16 | } );
17 | ]]>
18 |
19 |
20 | Column button callback
21 |
22 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/examples/two_tables.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | lfrtip',
10 | displayLength: 5
11 | } );
12 | } );
13 | ]]>
14 |
15 |
16 | Two tables with individual controls
17 |
18 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/examples/two_tables_identical.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
23 |
24 |
25 | Two tables with shared controls
26 |
27 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/js/dataTables.colVis.js:
--------------------------------------------------------------------------------
1 | /*! ColVis 1.1.2
2 | * ©2010-2015 SpryMedia Ltd - datatables.net/license
3 | */
4 |
5 | /**
6 | * @summary ColVis
7 | * @description Controls for column visibility in DataTables
8 | * @version 1.1.2
9 | * @file dataTables.colReorder.js
10 | * @author SpryMedia Ltd (www.sprymedia.co.uk)
11 | * @contact www.sprymedia.co.uk/contact
12 | * @copyright Copyright 2010-2015 SpryMedia Ltd.
13 | *
14 | * This source file is free software, available under the following license:
15 | * MIT license - http://datatables.net/license/mit
16 | *
17 | * This source file is distributed in the hope that it will be useful, but
18 | * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
19 | * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
20 | *
21 | * For details please refer to: http://www.datatables.net
22 | */
23 |
24 | (function(window, document, undefined) {
25 |
26 |
27 | var factory = function( $, DataTable ) {
28 | "use strict";
29 |
30 | /**
31 | * ColVis provides column visibility control for DataTables
32 | *
33 | * @class ColVis
34 | * @constructor
35 | * @param {object} DataTables settings object. With DataTables 1.10 this can
36 | * also be and API instance, table node, jQuery collection or jQuery selector.
37 | * @param {object} ColVis configuration options
38 | */
39 | var ColVis = function( oDTSettings, oInit )
40 | {
41 | /* Santiy check that we are a new instance */
42 | if ( !this.CLASS || this.CLASS != "ColVis" )
43 | {
44 | alert( "Warning: ColVis must be initialised with the keyword 'new'" );
45 | }
46 |
47 | if ( typeof oInit == 'undefined' )
48 | {
49 | oInit = {};
50 | }
51 |
52 | var camelToHungarian = $.fn.dataTable.camelToHungarian;
53 | if ( camelToHungarian ) {
54 | camelToHungarian( ColVis.defaults, ColVis.defaults, true );
55 | camelToHungarian( ColVis.defaults, oInit );
56 | }
57 |
58 |
59 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
60 | * Public class variables
61 | * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
62 |
63 | /**
64 | * @namespace Settings object which contains customisable information for
65 | * ColVis instance. Augmented by ColVis.defaults
66 | */
67 | this.s = {
68 | /**
69 | * DataTables settings object
70 | * @property dt
71 | * @type Object
72 | * @default null
73 | */
74 | "dt": null,
75 |
76 | /**
77 | * Customisation object
78 | * @property oInit
79 | * @type Object
80 | * @default passed in
81 | */
82 | "oInit": oInit,
83 |
84 | /**
85 | * Flag to say if the collection is hidden
86 | * @property hidden
87 | * @type boolean
88 | * @default true
89 | */
90 | "hidden": true,
91 |
92 | /**
93 | * Store the original visibility settings so they could be restored
94 | * @property abOriginal
95 | * @type Array
96 | * @default []
97 | */
98 | "abOriginal": []
99 | };
100 |
101 |
102 | /**
103 | * @namespace Common and useful DOM elements for the class instance
104 | */
105 | this.dom = {
106 | /**
107 | * Wrapper for the button - given back to DataTables as the node to insert
108 | * @property wrapper
109 | * @type Node
110 | * @default null
111 | */
112 | "wrapper": null,
113 |
114 | /**
115 | * Activation button
116 | * @property button
117 | * @type Node
118 | * @default null
119 | */
120 | "button": null,
121 |
122 | /**
123 | * Collection list node
124 | * @property collection
125 | * @type Node
126 | * @default null
127 | */
128 | "collection": null,
129 |
130 | /**
131 | * Background node used for shading the display and event capturing
132 | * @property background
133 | * @type Node
134 | * @default null
135 | */
136 | "background": null,
137 |
138 | /**
139 | * Element to position over the activation button to catch mouse events when using mouseover
140 | * @property catcher
141 | * @type Node
142 | * @default null
143 | */
144 | "catcher": null,
145 |
146 | /**
147 | * List of button elements
148 | * @property buttons
149 | * @type Array
150 | * @default []
151 | */
152 | "buttons": [],
153 |
154 | /**
155 | * List of group button elements
156 | * @property groupButtons
157 | * @type Array
158 | * @default []
159 | */
160 | "groupButtons": [],
161 |
162 | /**
163 | * Restore button
164 | * @property restore
165 | * @type Node
166 | * @default null
167 | */
168 | "restore": null
169 | };
170 |
171 | /* Store global reference */
172 | ColVis.aInstances.push( this );
173 |
174 | /* Constructor logic */
175 | this.s.dt = $.fn.dataTable.Api ?
176 | new $.fn.dataTable.Api( oDTSettings ).settings()[0] :
177 | oDTSettings;
178 |
179 | this._fnConstruct( oInit );
180 | return this;
181 | };
182 |
183 |
184 |
185 | ColVis.prototype = {
186 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
187 | * Public methods
188 | * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
189 |
190 | /**
191 | * Get the ColVis instance's control button so it can be injected into the
192 | * DOM
193 | * @method button
194 | * @returns {node} ColVis button
195 | */
196 | button: function ()
197 | {
198 | return this.dom.wrapper;
199 | },
200 |
201 | /**
202 | * Alias of `rebuild` for backwards compatibility
203 | * @method fnRebuild
204 | */
205 | "fnRebuild": function ()
206 | {
207 | this.rebuild();
208 | },
209 |
210 | /**
211 | * Rebuild the list of buttons for this instance (i.e. if there is a column
212 | * header update)
213 | * @method fnRebuild
214 | */
215 | rebuild: function ()
216 | {
217 | /* Remove the old buttons */
218 | for ( var i=this.dom.buttons.length-1 ; i>=0 ; i-- ) {
219 | this.dom.collection.removeChild( this.dom.buttons[i] );
220 | }
221 | this.dom.buttons.splice( 0, this.dom.buttons.length );
222 | this.dom.groupButtons.splice(0, this.dom.groupButtons.length);
223 |
224 | if ( this.dom.restore ) {
225 | this.dom.restore.parentNode( this.dom.restore );
226 | }
227 |
228 | /* Re-add them (this is not the optimal way of doing this, it is fast and effective) */
229 | this._fnAddGroups();
230 | this._fnAddButtons();
231 |
232 | /* Update the checkboxes */
233 | this._fnDrawCallback();
234 | },
235 |
236 |
237 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
238 | * Private methods (they are of course public in JS, but recommended as private)
239 | * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
240 |
241 | /**
242 | * Constructor logic
243 | * @method _fnConstruct
244 | * @returns void
245 | * @private
246 | */
247 | "_fnConstruct": function ( init )
248 | {
249 | this._fnApplyCustomisation( init );
250 |
251 | var that = this;
252 | var i, iLen;
253 | this.dom.wrapper = document.createElement('div');
254 | this.dom.wrapper.className = "ColVis";
255 |
256 | this.dom.button = $( '', {
257 | 'class': !this.s.dt.bJUI ?
258 | "ColVis_Button ColVis_MasterButton" :
259 | "ColVis_Button ColVis_MasterButton ui-button ui-state-default"
260 | } )
261 | .append( ''+this.s.buttonText+'' )
262 | .bind( this.s.activate=="mouseover" ? "mouseover" : "click", function (e) {
263 | e.preventDefault();
264 | that._fnCollectionShow();
265 | } )
266 | .appendTo( this.dom.wrapper )[0];
267 |
268 | this.dom.catcher = this._fnDomCatcher();
269 | this.dom.collection = this._fnDomCollection();
270 | this.dom.background = this._fnDomBackground();
271 |
272 | this._fnAddGroups();
273 | this._fnAddButtons();
274 |
275 | /* Store the original visibility information */
276 | for ( i=0, iLen=this.s.dt.aoColumns.length ; i'+
503 | this.s.restore+
504 | ''
505 | )
506 | .click( function (e) {
507 | for ( var i=0, iLen=that.s.abOriginal.length ; i'+
532 | str+
533 | ''
534 | )
535 | .click( function (e) {
536 | for ( var i=0, iLen=that.s.abOriginal.length ; i'+
566 | ''+
570 | ''
571 | )
572 | .click( function (e) {
573 | var showHide = !$('input', this).is(":checked");
574 | if ( e.target.nodeName.toLowerCase() !== "li" )
575 | {
576 | showHide = ! showHide;
577 | }
578 |
579 | for ( var j=0 ; j < oGroup.aiColumns.length ; j++ )
580 | {
581 | that.s.dt.oInstance.fnSetColumnVis( oGroup.aiColumns[j], showHide );
582 | }
583 | } )[0];
584 | },
585 |
586 |
587 | /**
588 | * Create the DOM for a show / hide button
589 | * @method _fnDomColumnButton
590 | * @param {int} i Column in question
591 | * @returns {Node} Created button
592 | * @private
593 | */
594 | "_fnDomColumnButton": function ( i )
595 | {
596 | var
597 | that = this,
598 | column = this.s.dt.aoColumns[i],
599 | dt = this.s.dt;
600 |
601 | var title = this.s.fnLabel===null ?
602 | column.sTitle :
603 | this.s.fnLabel( i, column.sTitle, column.nTh );
604 |
605 | return $(
606 | ''+
607 | ''+
611 | ''
612 | )
613 | .click( function (e) {
614 | var showHide = !$('input', this).is(":checked");
615 | if ( e.target.nodeName.toLowerCase() !== "li" )
616 | {
617 | if ( e.target.nodeName.toLowerCase() == "input" || that.s.fnStateChange === null )
618 | {
619 | showHide = ! showHide;
620 | }
621 | }
622 |
623 | /* Need to consider the case where the initialiser created more than one table - change the
624 | * API index that DataTables is using
625 | */
626 | var oldIndex = $.fn.dataTableExt.iApiIndex;
627 | $.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that);
628 |
629 | // Optimisation for server-side processing when scrolling - don't do a full redraw
630 | if ( dt.oFeatures.bServerSide )
631 | {
632 | that.s.dt.oInstance.fnSetColumnVis( i, showHide, false );
633 | that.s.dt.oInstance.fnAdjustColumnSizing( false );
634 | if (dt.oScroll.sX !== "" || dt.oScroll.sY !== "" )
635 | {
636 | that.s.dt.oInstance.oApi._fnScrollDraw( that.s.dt );
637 | }
638 | that._fnDrawCallback();
639 | }
640 | else
641 | {
642 | that.s.dt.oInstance.fnSetColumnVis( i, showHide );
643 | }
644 |
645 | $.fn.dataTableExt.iApiIndex = oldIndex; /* Restore */
646 |
647 | if ( that.s.fnStateChange !== null )
648 | {
649 | if ( e.target.nodeName.toLowerCase() == "span" )
650 | {
651 | e.preventDefault();
652 | }
653 | that.s.fnStateChange.call( that, i, showHide );
654 | }
655 | } )[0];
656 | },
657 |
658 |
659 | /**
660 | * Get the position in the DataTables instance array of the table for this
661 | * instance of ColVis
662 | * @method _fnDataTablesApiIndex
663 | * @returns {int} Index
664 | * @private
665 | */
666 | "_fnDataTablesApiIndex": function ()
667 | {
668 | for ( var i=0, iLen=this.s.dt.oInstance.length ; i', {
689 | 'class': !this.s.dt.bJUI ?
690 | "ColVis_collection" :
691 | "ColVis_collection ui-buttonset ui-buttonset-multi"
692 | } )
693 | .css( {
694 | 'display': 'none',
695 | 'opacity': 0,
696 | 'position': ! this.s.bCssPosition ?
697 | 'absolute' :
698 | ''
699 | } )[0];
700 | },
701 |
702 |
703 | /**
704 | * An element to be placed on top of the activate button to catch events
705 | * @method _fnDomCatcher
706 | * @returns {Node} div container for the collection
707 | * @private
708 | */
709 | "_fnDomCatcher": function ()
710 | {
711 | var
712 | that = this,
713 | nCatcher = document.createElement('div');
714 | nCatcher.className = "ColVis_catcher";
715 |
716 | $(nCatcher).click( function () {
717 | that._fnCollectionHide.call( that, null, null );
718 | } );
719 |
720 | return nCatcher;
721 | },
722 |
723 |
724 | /**
725 | * Create the element used to shade the background, and capture hide events (it is shown and
726 | * hidden as needed)
727 | * @method _fnDomBackground
728 | * @returns {Node} div container for the background
729 | * @private
730 | */
731 | "_fnDomBackground": function ()
732 | {
733 | var that = this;
734 |
735 | var background = $('')
736 | .addClass( 'ColVis_collectionBackground' )
737 | .css( 'opacity', 0 )
738 | .click( function () {
739 | that._fnCollectionHide.call( that, null, null );
740 | } );
741 |
742 | /* When considering a mouse over action for the activation, we also consider a mouse out
743 | * which is the same as a mouse over the background - without all the messing around of
744 | * bubbling events. Use the catcher element to avoid messing around with bubbling
745 | */
746 | if ( this.s.activate == "mouseover" )
747 | {
748 | background.mouseover( function () {
749 | that.s.overcollection = false;
750 | that._fnCollectionHide.call( that, null, null );
751 | } );
752 | }
753 |
754 | return background[0];
755 | },
756 |
757 |
758 | /**
759 | * Show the show / hide list and the background
760 | * @method _fnCollectionShow
761 | * @returns void
762 | * @private
763 | */
764 | "_fnCollectionShow": function ()
765 | {
766 | var that = this, i, iLen, iLeft;
767 | var oPos = $(this.dom.button).offset();
768 | var nHidden = this.dom.collection;
769 | var nBackground = this.dom.background;
770 | var iDivX = parseInt(oPos.left, 10);
771 | var iDivY = parseInt(oPos.top + $(this.dom.button).outerHeight(), 10);
772 |
773 | if ( ! this.s.bCssPosition )
774 | {
775 | nHidden.style.top = iDivY+"px";
776 | nHidden.style.left = iDivX+"px";
777 | }
778 |
779 | $(nHidden).css( {
780 | 'display': 'block',
781 | 'opacity': 0
782 | } );
783 |
784 | nBackground.style.bottom ='0px';
785 | nBackground.style.right = '0px';
786 |
787 | var oStyle = this.dom.catcher.style;
788 | oStyle.height = $(this.dom.button).outerHeight()+"px";
789 | oStyle.width = $(this.dom.button).outerWidth()+"px";
790 | oStyle.top = oPos.top+"px";
791 | oStyle.left = iDivX+"px";
792 |
793 | document.body.appendChild( nBackground );
794 | document.body.appendChild( nHidden );
795 | document.body.appendChild( this.dom.catcher );
796 |
797 | /* This results in a very small delay for the end user but it allows the animation to be
798 | * much smoother. If you don't want the animation, then the setTimeout can be removed
799 | */
800 | $(nHidden).animate({"opacity": 1}, that.s.iOverlayFade);
801 | $(nBackground).animate({"opacity": 0.1}, that.s.iOverlayFade, 'linear', function () {
802 | /* In IE6 if you set the checked attribute of a hidden checkbox, then this is not visually
803 | * reflected. As such, we need to do it here, once it is visible. Unbelievable.
804 | */
805 | if ( $.browser && $.browser.msie && $.browser.version == "6.0" )
806 | {
807 | that._fnDrawCallback();
808 | }
809 | });
810 |
811 | /* Visual corrections to try and keep the collection visible */
812 | if ( !this.s.bCssPosition )
813 | {
814 | iLeft = ( this.s.sAlign=="left" ) ?
815 | iDivX :
816 | iDivX - $(nHidden).outerWidth() + $(this.dom.button).outerWidth();
817 |
818 | nHidden.style.left = iLeft+"px";
819 |
820 | var iDivWidth = $(nHidden).outerWidth();
821 | var iDivHeight = $(nHidden).outerHeight();
822 | var iDocWidth = $(document).width();
823 |
824 | if ( iLeft + iDivWidth > iDocWidth )
825 | {
826 | nHidden.style.left = (iDocWidth-iDivWidth)+"px";
827 | }
828 | }
829 |
830 | this.s.hidden = false;
831 | },
832 |
833 |
834 | /**
835 | * Hide the show / hide list and the background
836 | * @method _fnCollectionHide
837 | * @returns void
838 | * @private
839 | */
840 | "_fnCollectionHide": function ( )
841 | {
842 | var that = this;
843 |
844 | if ( !this.s.hidden && this.dom.collection !== null )
845 | {
846 | this.s.hidden = true;
847 |
848 | $(this.dom.collection).animate({"opacity": 0}, that.s.iOverlayFade, function (e) {
849 | this.style.display = "none";
850 | } );
851 |
852 | $(this.dom.background).animate({"opacity": 0}, that.s.iOverlayFade, function (e) {
853 | document.body.removeChild( that.dom.background );
854 | document.body.removeChild( that.dom.catcher );
855 | } );
856 | }
857 | },
858 |
859 |
860 | /**
861 | * Alter the colspan on any fnOpen rows
862 | */
863 | "_fnAdjustOpenRows": function ()
864 | {
865 | var aoOpen = this.s.dt.aoOpenRows;
866 | var iVisible = this.s.dt.oApi._fnVisbleColumns( this.s.dt );
867 |
868 | for ( var i=0, iLen=aoOpen.length ; i