I have a table with a large number of columns. Some users may wish to show only certain columns, which can be achieved with the "column visibility" table tools function, which allows a user to enable or disable visibility of individual columns.
What would be more practical for users, however, is to have a number of pre-defined visibility settings, e.g. "basic", "advanced" etc. which shows specific pre-set columns.
You can click on the "Columns" button above the table, and configure the visibility of columns for all users, both in the back-end and in the front-end.
So, when you open that, a new modal will open, where you need to click on the "eye" symbol, hiding the columns you don't want to display on page load. The users would still be able to click on the "Column visibility" button, and display all hidden columns.
Thank you for your reply. I believe my initial question may not have been fully clear. I am aware of the ability to use the "Columns" button above the table to change visibility for all users, and the "column visibility" button that front-end users can use to hide and show columns.
However, what I am interesting in, is the following.
Assume I have a data with many columns. For example: a student with columns for grades for each course (physics, chemistry, math, french etc.). And for each course, there is a number of grades (e.g. Test 1, Test 2, Test 3 etc.).
Sometimes, a front-end uses may be interested to only see the results (of all tests) for one course (e.g. math). If that user wants to only show those columns that user has to individually disable all other columns. So for example, assume that this table shows 100 columns, that may involve disabling 80 columns on an individual basis; quite a burdensome exercise.
What would be more user friendly is if I could offer a button (eg "Math Results") that immediately hides all other columns (and only shows the math columns). Ideally, in this example, I would offer a button for each course, so the user can easily select the relevant columns that need to be visible.
This would definitely require a custom solution, which is not covered in the support for the plugin, but you can add JS on the page, and a button with an ID of the button, for example:
<button id="btn">Test</button>
<script>
jQuery("#btn").click(function() {
var column;
<!-- if there only one table on page id will be table_1 -->
var table = jQuery('#table_1').DataTable();
for(var i=0; i < table.columns()[0].length; i++){
column = {};
<!-- condition that hide all columns accept one with index 1 (columns starts from index 0) -->
if (i != 1){
column = table.column(i);
<!-- toggle the visibility for all other columns -->
column.visible(! column.visible());
}
}
});
</script>
If you need something else, you'll need to adjust the code, as this is just an example of how a custom solution could be used in similar cases.
wpDataTables is based on the Datatables plugin, and you can find a lot of examples like the following, on their site:
Thank you Aleksandar for the very helpful example.
Adding this code indeed adds a button to show one specific column only (other columns are hidden). I am not sure how to adjust this code so that multiple columns are shown (e.g. in your example only column "1" is shown, but how should this be adjusted if I want the button to show columns 1,2 and 5?
<button id="btn">Test</button>
<script>
jQuery("#btn").click(function() {
var column;
var columnIndex = [1, 2, 5];
<!-- if there only one table on page id will be table_1 --> var table = jQuery('#table_1').DataTable();
for(var i=0; i < table.columns()[0].length; i++){
column = {};
<!-- condition that hide all columns accept one with index 1 (columns starts from index 0) -->
if (!columnIndex.includes(i)){
column = table.column(i);
<!-- toggle the visibility for all other columns --> column.visible(! column.visible());
}
}
});
</script>
If I understand correctly, this "toggles" visibility for all columns (except the ones specified; i.e. in this case 1, 2, 5); i.e. what was hidden becomes visible and vice versa (except these specified columns). An undesirable side-effect is that that the result thus depends on what the visibility of columns was before the button was pressed:
- any columns that are made invisible by default (e.g. the wdt_ID column (column 0)) - which I have hidden by default - becomes visible by pressing the button. I could avoid this by adding column 0 to the list of 1, 2, 5.
- if the button is hit after certain columns have been manually made invisible (e.g. when I have 2 buttons) then the result becomes messy (as it inverts and already adjusted view).
I think the way to solve this would be to have a 'reset' function operate at the beginning of the script (i.e. resetting the column view to default) or to have the script work differently (i.e. instead of relying on a toggle function, specifically specify which columns are visible and which are hidden).
Any suggestions to tackle this problem? The first option (i.e. running a reset function at the beginning of the scrip) may be easiest, but not sure if this is a function that is available?
As mentioned before - this is a custom solution that is not covered in the support for the plugin.
You can hard code the columns you want to hide, so they can't be shown again through the "Column visibility" table tool, as mentioned in my previous response, but adding another function would require additional work, which unfortunately can't be provided.
So, the provided workaround works only if you have columns that you don't want to allow being shown in the table tool, but it doesn't work for clearing the view and reverting to its default behavior.
I have a table with a large number of columns. Some users may wish to show only certain columns, which can be achieved with the "column visibility" table tools function, which allows a user to enable or disable visibility of individual columns.
What would be more practical for users, however, is to have a number of pre-defined visibility settings, e.g. "basic", "advanced" etc. which shows specific pre-set columns.
Is there any way this can be achieved?
Hello Tijmen
You can click on the "Columns" button above the table, and configure the visibility of columns for all users, both in the back-end and in the front-end.
So, when you open that, a new modal will open, where you need to click on the "eye" symbol, hiding the columns you don't want to display on page load. The users would still be able to click on the "Column visibility" button, and display all hidden columns.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Dear Aleksandar,
Thank you for your reply. I believe my initial question may not have been fully clear. I am aware of the ability to use the "Columns" button above the table to change visibility for all users, and the "column visibility" button that front-end users can use to hide and show columns.
However, what I am interesting in, is the following.
Assume I have a data with many columns. For example: a student with columns for grades for each course (physics, chemistry, math, french etc.). And for each course, there is a number of grades (e.g. Test 1, Test 2, Test 3 etc.).
Sometimes, a front-end uses may be interested to only see the results (of all tests) for one course (e.g. math). If that user wants to only show those columns that user has to individually disable all other columns. So for example, assume that this table shows 100 columns, that may involve disabling 80 columns on an individual basis; quite a burdensome exercise.
What would be more user friendly is if I could offer a button (eg "Math Results") that immediately hides all other columns (and only shows the math columns). Ideally, in this example, I would offer a button for each course, so the user can easily select the relevant columns that need to be visible.
Is it possible to achieve this?
Hi again Tijmen
Thanks for the explanation.
I am sorry to disappoint you, but unfortunately, something like this is not possible with the plugin's built-in features.
I'll check with our developers if there's a workaround they can come up with for your use case, but I can't promise anything.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello again Tijmen
This would definitely require a custom solution, which is not covered in the support for the plugin, but you can add JS on the page, and a button with an ID of the button, for example:
<button id="btn">Test</button> <script> jQuery("#btn").click(function() { var column; <!-- if there only one table on page id will be table_1 --> var table = jQuery('#table_1').DataTable(); for(var i=0; i < table.columns()[0].length; i++){ column = {}; <!-- condition that hide all columns accept one with index 1 (columns starts from index 0) --> if (i != 1){ column = table.column(i); <!-- toggle the visibility for all other columns --> column.visible(! column.visible()); } } }); </script>If you need something else, you'll need to adjust the code, as this is just an example of how a custom solution could be used in similar cases.
wpDataTables is based on the Datatables plugin, and you can find a lot of examples like the following, on their site:
https://datatables.net/examples/api/show_hide.html
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thank you Aleksandar for the very helpful example.
Adding this code indeed adds a button to show one specific column only (other columns are hidden). I am not sure how to adjust this code so that multiple columns are shown (e.g. in your example only column "1" is shown, but how should this be adjusted if I want the button to show columns 1,2 and 5?
Your suggestions are much appreciated.
Kind regards,
Tijmen
Hey Tijmen,
It should work with this:
<button id="btn">Test</button> <script> jQuery("#btn").click(function() { var column; var columnIndex = [1, 2, 5]; <!-- if there only one table on page id will be table_1 --> var table = jQuery('#table_1').DataTable(); for(var i=0; i < table.columns()[0].length; i++){ column = {}; <!-- condition that hide all columns accept one with index 1 (columns starts from index 0) --> if (!columnIndex.includes(i)){ column = table.column(i); <!-- toggle the visibility for all other columns --> column.visible(! column.visible()); } } }); </script>Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thank you again Aleksandar,
If I understand correctly, this "toggles" visibility for all columns (except the ones specified; i.e. in this case 1, 2, 5); i.e. what was hidden becomes visible and vice versa (except these specified columns). An undesirable side-effect is that that the result thus depends on what the visibility of columns was before the button was pressed:
- any columns that are made invisible by default (e.g. the wdt_ID column (column 0)) - which I have hidden by default - becomes visible by pressing the button. I could avoid this by adding column 0 to the list of 1, 2, 5.
- if the button is hit after certain columns have been manually made invisible (e.g. when I have 2 buttons) then the result becomes messy (as it inverts and already adjusted view).
I think the way to solve this would be to have a 'reset' function operate at the beginning of the script (i.e. resetting the column view to default) or to have the script work differently (i.e. instead of relying on a toggle function, specifically specify which columns are visible and which are hidden).
Any suggestions to tackle this problem? The first option (i.e. running a reset function at the beginning of the scrip) may be easiest, but not sure if this is a function that is available?
Kind regards,
Tijmen
Hello again Tijmen.
As mentioned before - this is a custom solution that is not covered in the support for the plugin.
You can hard code the columns you want to hide, so they can't be shown again through the "Column visibility" table tool, as mentioned in my previous response, but adding another function would require additional work, which unfortunately can't be provided.
So, the provided workaround works only if you have columns that you don't want to allow being shown in the table tool, but it doesn't work for clearing the view and reverting to its default behavior.
Sorry for the inconvenience.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables