hi Allan. Have you ever gotten back to looking at lyiu18's grouped column enhancement?
I'm hopeful that the new 1.8 feature for grouping columns by colspan/rowspan might allow for this functionality, based on the wording here:
http://datatables.net/beta/1.8/examples/advanced_init/complex_header.html
It says: "In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and rendered on the page for you. This also allows the ColVis extra for DataTables to work great with hidden columns."
However, I'm not sure what those statements mean. I put one big th above all my other column headers (colspan 17 in my case) and it showed up, but it wasn't listed in the rows I can hide/show via ColVIs's menu above my table.
I recently implemented this plug-in and due to my requirements I implemented also lyiu18's grouped column enhancement. For me it works just fine, he forgot to mention one important change for ColVis initialization, though. The following statement needs to be added to the _fnApplyCustomisation method:
If this whole enhancement is added to the main branch some people would highly appreciate it, I guess ;-)
However, I found two more bugs in the recent version of ColVis, 1.0.4:
1- I had to add the following statement in method _fnDomBackground after setting the opacity, because in IE7 (and IE8 in IE7 compatibility mode) neither a click on the Collection show/hide button nor somewhere else on the screen was hiding the Collection list of buttons:
[code]if ( jQuery.browser.msie && jQuery.browser.version == "7.0" ) {
$(nBackground).css('background-color', 'white');
}[/code]
I honestly have no clue why exactly this works only with additional background set - I tried to debug it with some "hello world" output at first and wanted to emphasize its display with red background (IE7/IE8 debugging options are clearly devastating). As my application's background is mostly white or very light grey, setting this element's background to a fixed color didn't hurt me. But still: maybe there is a better solution available...
2- Method _fnApplyCustomisation consists of two identical statements to set bRestore, I removed one of
I didn't test this thoroughly though, maybe there needs to be another custom setting applied instead of the second bRestore? As for now, everything else works for me.
How do I get Colvis and Tabletools working together .... TAbletools looks fine , but the Colvis is displyaing the fields that i want to select/deselect , but I only see a small part of them , they are almost hidden behind the table that shows the data. Thanks for answer , but I made a mistake, spelled Colvis.css instead of ColVis.css . So now it works.
But when using exclude columns via ColVis and exporting via TableTools , It doesn't work as I hoped.
Print ok , PDF (almost looks ok, but text overlap ). Excel, csv and copy exports all columns also the excluded , unfortunately.
Hi, just wanted to say this is a great plugin. For all other users: you can create checkbox elements, assign the ID to the column ID (starting from 0), then use this snippet to toggle based on checkbox checked. Here's a quick example:
[code]
Company
Description
URL
[/code]
[code]
$("input[type='checkbox'].cb").change(function() {
var checked = $(this).is(":checked");
var id = $(this).attr("id");
dTable.fnSetColumnVis(id, checked);
});
[/code]
Hi, Is there a way to get the users currently hidden columns e.g. 2,5,11 I want to store this to a database and then use
aoColumnDefs": [ { "bVisible": false, "aTargets": [ 2,5,11 ] }
so the selection is remembered between sessions... is this the best solution?
Thanks, Chris.
UPDATE
Found a possible solution here:
http://www.datatables.net/forums/discussion/3700/colvis-get-list-of-hidden-or-shown-columns/p1
I'm trying to use ColVis with FixedColumns. I've run into a few issues. When I select the Show/hide columns button, the fixed columns are still in the list (even thought they are fixed) and unchecked. I've fixed my first 2 columns on the left. If I accidentally check one of them in the Show/hide columns list, the column is inserted where my 3rd column is. This is strange. How do I a) remove fixed columns from the Show/hide list since they are always being shown and b) prevent fixed columns from being inserted in place of an existing column?
Thank you in advance for your time and consideration.
Hi Allan,
I have a requirement but not exactly the default design of colVis. In my requirement, I have to add a custom button on DataTables header (we call it Add remove column) on left side before starting the the first column. Click on that one Jquery dragable popup layer (using Jqyery UI) will open showing all the columns names with respective checkboxes. On right side the respective column position (header1, header2, etc) of each column will displayed. Now user can drag and drop any column upward/downward and place it there. So for example if column Username was at first position, now user can moved it at 5th position (assuming example datatable is having 5 or more columns). then user can make a choice of column visibility by checking corresponding checkbox. Till the time nothing will happen with data table. There will be a button called "Apply Changes". Clicking on that user made prefrences will be saved to database as well as datatable will re-arrange its columns according to user opted prefs. Dont know how to do or where to start.
can you please suggest. Thanks in advance
I have a page right now, using ColVis, in which my grid and button are at the right most side of the screen, and my text is wrapping to the next line because of the length of the label and is either not readable or, if I set the option "sSize": "css", it's written on top of the border. and it looks bad.
If I use firebug and manually adjust the width of the div and the left side of it it works... but these values seem to be calculated each time it drops down.
So, my question is:
Is it possible to set the ColVis Options in such a way as to have the Right side of the drop down to line up to the right side of the button and make the left value to be relative to the needed width of the div based on the text given?
This might be a silly question but how do I gain focus of the button and navigate it with keyboard only? I know how to do this with other jquery components (z-index, css focus) but I don't know how to do this with the sDom property alone?
I also need to do this for the TableTools buttons as well?
You probably need to add a table index attribute to the buttons. They don't actually have this ability built in at the moment, but they should. I'll see about adding that ability for the next release of each package.
Thanks for the quick reply. I've been looking into this feature all day. I added the tab index attributes. I had to put them on the inner buttons as well to get them to traverse ( I was hoping to not change the js file).
My problem now is that I can't close the popup window. I think what I would have to do now is write my own key event listeners so this may be past my abilities.
Yes, you probably need to listen for key up and call a method to close the menu. It is unfortunate that the extras don't do that yet. They will at some point in future (I'm spending all my available time on DataTables 1.10 at the moment).
Great extra, love ColVis, however I have noticed a problem when using it with html tables inside DIV's that I regularly show / hide.
Example, I have a set of results that are displayed in table #1 , the user can click on some text in one row which will load another table of details relating to that record.
That 2nd table gets displayed by hiding the DIV the original table was in, the ColVis button, when clicked to display the columns completely hangs the browser, same thing happens in firefox/chrome att he moment.
I thought perhaps it can only be called once per page, so I removed the "C" sDom from the first table and event hen with the 2nd table loading and clicking on the button to show/display the columns the page is 'locked'
I would presume it has gone to display the columns but they are hidden or in the original div that was hidden .. why? I am not sure, nothing else behaves like this as it should be relative to the div it is operating in I thought.
I'm not quite sure how to further debug this, perhaps by not hiding the previous div and seeing what happens, (which I just tested) the previous tables do not have the colVis sDom associated, each table has its own identifier as well, none share anything common. I hope someone can assist with this, as it's got me beat.
thanks
*edit* bit further with the debugging, I've found in the console the following appears when this error happens :
[quote]
Uncaught ReferenceError: nButton is not defined ColVis.min.js:23
ColVis._fnCollectionShow ColVis.min.js:23
(anonymous function) ColVis.min.js:20
d.event.handle jquery-1.5.min.js:16
k.handle.m jquery-1.5.min.js:16
[/quote]
*update* Further investigation I have just realied that I acquired a copy of ColVis-1.0.1 which the error was occuring with, dont know how I got that download link through this site now. But I did just realise 1.0.8 is the latest verison, upon downloading that and simply copying across the new ColVis.min.js the show/hide is working exactly as it should now.
Leaving this post here in case someone else stumbles across this.
Replies
I'm hopeful that the new 1.8 feature for grouping columns by colspan/rowspan might allow for this functionality, based on the wording here:
http://datatables.net/beta/1.8/examples/advanced_init/complex_header.html
It says: "In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and rendered on the page for you. This also allows the ColVis extra for DataTables to work great with hidden columns."
However, I'm not sure what those statements mean. I put one big th above all my other column headers (colspan 17 in my case) and it showed up, but it wasn't listed in the rows I can hide/show via ColVIs's menu above my table.
I recently implemented this plug-in and due to my requirements I implemented also lyiu18's grouped column enhancement. For me it works just fine, he forgot to mention one important change for ColVis initialization, though. The following statement needs to be added to the _fnApplyCustomisation method:
[code]if ( typeof oConfig.aoGroups != 'undefined' )
{
this.s.aoGroups = oConfig.aoGroups;
}[/code]
If this whole enhancement is added to the main branch some people would highly appreciate it, I guess ;-)
However, I found two more bugs in the recent version of ColVis, 1.0.4:
1- I had to add the following statement in method _fnDomBackground after setting the opacity, because in IE7 (and IE8 in IE7 compatibility mode) neither a click on the Collection show/hide button nor somewhere else on the screen was hiding the Collection list of buttons:
[code]if ( jQuery.browser.msie && jQuery.browser.version == "7.0" ) {
$(nBackground).css('background-color', 'white');
}[/code]
I honestly have no clue why exactly this works only with additional background set - I tried to debug it with some "hello world" output at first and wanted to emphasize its display with red background (IE7/IE8 debugging options are clearly devastating). As my application's background is mostly white or very light grey, setting this element's background to a fixed color didn't hurt me. But still: maybe there is a better solution available...
2- Method _fnApplyCustomisation consists of two identical statements to set bRestore, I removed one of
[code]if ( typeof oConfig.bRestore != 'undefined' )
{
this.s.bRestore = oConfig.bRestore;
}[/code]
I didn't test this thoroughly though, maybe there needs to be another custom setting applied instead of the second bRestore? As for now, everything else works for me.
Regards,
fha
But when using exclude columns via ColVis and exporting via TableTools , It doesn't work as I hoped.
Print ok , PDF (almost looks ok, but text overlap ). Excel, csv and copy exports all columns also the excluded , unfortunately.
Allan
[code]
Company
Description
URL
[/code]
[code]
$("input[type='checkbox'].cb").change(function() {
var checked = $(this).is(":checked");
var id = $(this).attr("id");
dTable.fnSetColumnVis(id, checked);
});
[/code]
aoColumnDefs": [ { "bVisible": false, "aTargets": [ 2,5,11 ] }
so the selection is remembered between sessions... is this the best solution?
Thanks, Chris.
UPDATE
Found a possible solution here:
http://www.datatables.net/forums/discussion/3700/colvis-get-list-of-hidden-or-shown-columns/p1
Strangely, when I click an unchecked box, it works. (This column was set with bVisible=false.)
So, somehow, I have a one-way checkbox (unchecked-to-checked). Anyone ever see this before?
EDIT: Never mind, solved. I wasn't using the latest version of the plugin.
@GrantB - Good to hear the latest versions work :-)
Allan
Thank you in advance for your time and consideration.
I have a requirement but not exactly the default design of colVis. In my requirement, I have to add a custom button on DataTables header (we call it Add remove column) on left side before starting the the first column. Click on that one Jquery dragable popup layer (using Jqyery UI) will open showing all the columns names with respective checkboxes. On right side the respective column position (header1, header2, etc) of each column will displayed. Now user can drag and drop any column upward/downward and place it there. So for example if column Username was at first position, now user can moved it at 5th position (assuming example datatable is having 5 or more columns). then user can make a choice of column visibility by checking corresponding checkbox. Till the time nothing will happen with data table. There will be a button called "Apply Changes". Clicking on that user made prefrences will be saved to database as well as datatable will re-arrange its columns according to user opted prefs. Dont know how to do or where to start.
can you please suggest. Thanks in advance
If I use firebug and manually adjust the width of the div and the left side of it it works... but these values seem to be calculated each time it drops down.
So, my question is:
Is it possible to set the ColVis Options in such a way as to have the Right side of the drop down to line up to the right side of the button and make the left value to be relative to the needed width of the div based on the text given?
[code]
http://live.datatables.net/evuwim/5
[/code]
and doing the real time preview
It's basing the drop down off the offset of the button. Can't tell if js is not adjusting the left of the div based on length of text or not.
I also need to do this for the TableTools buttons as well?
Allan
My problem now is that I can't close the popup window. I think what I would have to do now is write my own key event listeners so this may be past my abilities.
Allan
Great extra, love ColVis, however I have noticed a problem when using it with html tables inside DIV's that I regularly show / hide.
Example, I have a set of results that are displayed in table #1 , the user can click on some text in one row which will load another table of details relating to that record.
That 2nd table gets displayed by hiding the DIV the original table was in, the ColVis button, when clicked to display the columns completely hangs the browser, same thing happens in firefox/chrome att he moment.
I thought perhaps it can only be called once per page, so I removed the "C" sDom from the first table and event hen with the 2nd table loading and clicking on the button to show/display the columns the page is 'locked'
I would presume it has gone to display the columns but they are hidden or in the original div that was hidden .. why? I am not sure, nothing else behaves like this as it should be relative to the div it is operating in I thought.
I'm not quite sure how to further debug this, perhaps by not hiding the previous div and seeing what happens, (which I just tested) the previous tables do not have the colVis sDom associated, each table has its own identifier as well, none share anything common. I hope someone can assist with this, as it's got me beat.
thanks
*edit* bit further with the debugging, I've found in the console the following appears when this error happens :
[quote]
Uncaught ReferenceError: nButton is not defined ColVis.min.js:23
ColVis._fnCollectionShow ColVis.min.js:23
(anonymous function) ColVis.min.js:20
d.event.handle jquery-1.5.min.js:16
k.handle.m jquery-1.5.min.js:16
[/quote]
*update* Further investigation I have just realied that I acquired a copy of ColVis-1.0.1 which the error was occuring with, dont know how I got that download link through this site now. But I did just realise 1.0.8 is the latest verison, upon downloading that and simply copying across the new ColVis.min.js the show/hide is working exactly as it should now.
Leaving this post here in case someone else stumbles across this.
Allan