ColVis
is a plug-in for DataTables which presents a list of all columns to a user and allows them to select which ones they wish to be visible. Click the "three bars"
button to be presented with a list of columns in the table, and click the buttons to show and hide them as you wish. ColVis is added to a DataTable by specifying the C
option for dom
.
Name |
Position |
Age |
Start date |
Salary |
Actions |
Tiger Nixon |
System Architect |
61 |
2011/04/25 |
$320,800 |
|
Garrett Winters |
Accountant |
63 |
2011/07/25 |
$170,750 |
|
Ashton Cox |
Junior Technical Author |
66 |
2009/01/12 |
$86,000 |
|
Cedric Kelly |
Senior Javascript Developer |
22 |
2012/03/29 |
$433,060 |
|
Airi Satou |
Accountant |
33 |
2008/11/28 |
$162,700 |
|
Brielle Williamson |
Integration Specialist |
61 |
2012/12/02 |
$372,000 |
|
Herrod Chandler |
Sales Assistant |
59 |
2012/08/06 |
$137,500 |
|
Rhona Davidson |
Integration Specialist |
55 |
2010/10/14 |
$97,900 |
|
Colleen Hurst |
Javascript Developer |
39 |
2009/09/15 |
$405,500 |
|
Sonya Frost |
Software Engineer |
23 |
2008/12/13 |
$103,600 |
|
Jena Gaines |
Office Manager |
30 |
2008/12/19 |
$90,560 |
|
Quinn Flynn |
Support Lead |
22 |
2013/03/03 |
$342,000 |
|
Charde Marshall |
Regional Director |
36 |
2008/10/16 |
$470,600 |
|
Haley Kennedy |
Senior Marketing Designer |
43 |
2012/12/18 |
$113,500 |
|
Tatyana Fitzpatrick |
Regional Director |
19 |
2010/03/17 |
$385,750 |
|
It can at times be useful to exclude columns from being in the 'show / hide'
list (for example if you have hidden information that the end user shouldn't be able to make visible. This can be done by the exclude
ColVis configuration parameter when creating the DataTable. This is simply an array of integers, indicating which columns should be excluded. This example shows the first column being excluded.
Name |
Position |
Age |
Start date |
Salary |
Actions |
Tiger Nixon |
System Architect |
61 |
2011/04/25 |
$320,800 |
|
Garrett Winters |
Accountant |
63 |
2011/07/25 |
$170,750 |
|
Ashton Cox |
Junior Technical Author |
66 |
2009/01/12 |
$86,000 |
|
Cedric Kelly |
Senior Javascript Developer |
22 |
2012/03/29 |
$433,060 |
|
Airi Satou |
Accountant |
33 |
2008/11/28 |
$162,700 |
|
Brielle Williamson |
Integration Specialist |
61 |
2012/12/02 |
$372,000 |
|
Herrod Chandler |
Sales Assistant |
59 |
2012/08/06 |
$137,500 |
|
Rhona Davidson |
Integration Specialist |
55 |
2010/10/14 |
$97,900 |
|
Colleen Hurst |
Javascript Developer |
39 |
2009/09/15 |
$405,500 |
|
Sonya Frost |
Software Engineer |
23 |
2008/12/13 |
$103,600 |
|
Jena Gaines |
Office Manager |
30 |
2008/12/19 |
$90,560 |
|
Quinn Flynn |
Support Lead |
22 |
2013/03/03 |
$342,000 |
|
Charde Marshall |
Regional Director |
36 |
2008/10/16 |
$470,600 |
|
Haley Kennedy |
Senior Marketing Designer |
43 |
2012/12/18 |
$113,500 |
|
Tatyana Fitzpatrick |
Regional Director |
19 |
2010/03/17 |
$385,750 |
|
The list of columns that ColVis displays has two options for the order in which they are displayed. The default mode of operation is to show the buttons in the same order as they appear in the HTML table, but the second mode of operation is to show the buttons in alphabetical
order. This is done by specifying the order option, set to alpha. Alphabetical
button ordering is shown in this example.
Name |
Position |
Age |
Start date |
Salary |
Actions |
Tiger Nixon |
System Architect |
61 |
2011/04/25 |
$320,800 |
|
Garrett Winters |
Accountant |
63 |
2011/07/25 |
$170,750 |
|
Ashton Cox |
Junior Technical Author |
66 |
2009/01/12 |
$86,000 |
|
Cedric Kelly |
Senior Javascript Developer |
22 |
2012/03/29 |
$433,060 |
|
Airi Satou |
Accountant |
33 |
2008/11/28 |
$162,700 |
|
Brielle Williamson |
Integration Specialist |
61 |
2012/12/02 |
$372,000 |
|
Herrod Chandler |
Sales Assistant |
59 |
2012/08/06 |
$137,500 |
|
Rhona Davidson |
Integration Specialist |
55 |
2010/10/14 |
$97,900 |
|
Colleen Hurst |
Javascript Developer |
39 |
2009/09/15 |
$405,500 |
|
Sonya Frost |
Software Engineer |
23 |
2008/12/13 |
$103,600 |
|
Jena Gaines |
Office Manager |
30 |
2008/12/19 |
$90,560 |
|
Quinn Flynn |
Support Lead |
22 |
2013/03/03 |
$342,000 |
|
Charde Marshall |
Regional Director |
36 |
2008/10/16 |
$470,600 |
|
Haley Kennedy |
Senior Marketing Designer |
43 |
2012/12/18 |
$113,500 |
|
Tatyana Fitzpatrick |
Regional Director |
19 |
2010/03/17 |
$385,750 |
|
The default activation (showing the columns list) for ColVis is for the user to click
the button. This can be altered to a mouseover
activation by making use of the activate
initialisation option and setting it to mouseover. This parameter denotes how the dropdown list of columns can be activated by the end user. Its value should be either mouseover
or click
.
Name |
Position |
Age |
Start date |
Salary |
Actions |
Tiger Nixon |
System Architect |
61 |
2011/04/25 |
$320,800 |
|
Garrett Winters |
Accountant |
63 |
2011/07/25 |
$170,750 |
|
Ashton Cox |
Junior Technical Author |
66 |
2009/01/12 |
$86,000 |
|
Cedric Kelly |
Senior Javascript Developer |
22 |
2012/03/29 |
$433,060 |
|
Airi Satou |
Accountant |
33 |
2008/11/28 |
$162,700 |
|
Brielle Williamson |
Integration Specialist |
61 |
2012/12/02 |
$372,000 |
|
Herrod Chandler |
Sales Assistant |
59 |
2012/08/06 |
$137,500 |
|
Rhona Davidson |
Integration Specialist |
55 |
2010/10/14 |
$97,900 |
|
Colleen Hurst |
Javascript Developer |
39 |
2009/09/15 |
$405,500 |
|
Sonya Frost |
Software Engineer |
23 |
2008/12/13 |
$103,600 |
|
Jena Gaines |
Office Manager |
30 |
2008/12/19 |
$90,560 |
|
Quinn Flynn |
Support Lead |
22 |
2013/03/03 |
$342,000 |
|
Charde Marshall |
Regional Director |
36 |
2008/10/16 |
$470,600 |
|
Haley Kennedy |
Senior Marketing Designer |
43 |
2012/12/18 |
$113,500 |
|
Tatyana Fitzpatrick |
Regional Director |
19 |
2010/03/17 |
$385,750 |
|