How to use Complex header in column visibility ( Toggle) buttons using datatables.
How to use Complex header in column visibility ( Toggle) buttons using datatables.
Shivani Vyas
Posts: 113Questions: 11Answers: 0
in ColVis
Hello.. I would like to use column visibility toggle buttons for few columns. I used complex header and each header have same named sub columns. I want to make toggle button with the name of complex header column and want to hide and show sub columns ( Planned, Forecast, Actual column) when user click on toggle button. Right now I used columnsToggle which only display sub column names (3 toggle buttons). Here is my code. Thank you.
<table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
<thead>
<th class='text-center', rowspan="2">Location</th>
<th class='text-center', rowspan="2">Drawing ID</th>
<th class='text-center', rowspan="2">Status </th>
<th class='text-center', colspan="2">Levels</th>
<th class='text-center', colspan="3">Mechanical/Side COP Mechanical Drawings</th>
</tr>
<tr class=''>
<th class='text-center'>Higher</th>
<th class='text-center'>Lower</th>
<th class='text-center'>Planned</th>
<th class='text-center'>Forecast</th>
<th class='text-center'>Actual</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" class="init">
var editor;
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: "../ajax/at/elevators.php",
table: "#assyntCx_Table",
template: '#customForm',
fields: [
{
label: 'assetid',
name: 'E.assetid',
type: 'hidden',
},
{
label: 'Location',
name: 'Location',
type: 'select',
//attr:{disabled:true},
placeholderDisabled: false,
placeholder: "Select location"
},
{
label: 'Drawing ID',
name: 'A.dwgTag',
// type: 'readonly',
//attr:{disabled:true},
},
{
label: 'Higher',
name: 'Higher',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose Level"
},
{
label: 'Lower',
name: 'Lower',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose Level"
},
// {
// label: 'Status',
// name: 'E.elevatorStatus',
// type: 'select',
// placeholderDisabled: false,
// placeholder: "Select Status"
// },
{
label: 'Planned',
name: 'MSDPlanned',
type: 'datetime',
},
{
label: 'Forecast',
name: 'MSDForecast',
type: 'datetime',
},
{
label: 'Actual',
name: 'MSDActual',
type: 'datetime',
},
],
formOptions: {
main: {
scope: 'cell' // Allow multi-row editing with cell selection
}
},
} );
var table = $('#assyntCx_Table').DataTable( {
dom: "lBfrtip",
//AJAX
//serverSide: true,
processing: true,
ajax: {
url: "../ajax/at/elevators.php",
type: "POST",
deferRender: true,
},
//TABLE WINDOW
scrollY: "65vh",
scrollX: true,
scrollCollapse: false,
paging: true,
fixedColumns: {
left: 3
},
columns: [
{ data: "Location" },
{ data: "A.dwgTag"},
{ data: "Status"},
//{ data: "E.assetid" },
{ data: "higherlevel"},
{ data: "lowerlevel"},
{data: "MSDPlanned",
class: "toggle"
},
{ data: "MSDForecast",
class: "toggle"
},
{ data: "MSDActual",
class: "toggle"
},
],
select: true,
//stateSave: true,
buttons: [ ],
//PAGINATION OPTIONS
"pageLength": 250,
"lengthMenu": [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
} );
var permission = '<?php echo $role ?>';
//console.log(permission);
if (permission > 20) {
table.button().add(
null, { extend: "edit", editor: editor },
);
table.button().add(
null, {
extend: "columnsToggle",
columns: '.toggle',
},
);
table.button().add(
null, { extend: "excel" },
);
}
if (permission == 40) { // Columns editable by SuperAdmin
editor.enable(
[
'Location',
'A.dwgTag',
] );
}
else { // Columns not editable by Users
editor.disable(
[
'Location',
'A.dwgTag',
] );
}
} );
</script>
<?php require('../includes/fileend.php') ?>
Replies
This is my output picture. Instead of 3 toggle button I want Toggle button called "Mechanical/Side COP Mechanical Drawings" - which can hide and show 3 sub columns (Planned , Forecast, Actual) when user click on that button.
This example here should help, it's showing how to groups columns like you're after,
Colin
Hi @colin I already tried using 'colvisGroup' but it is not toggle button. If I use colvisGroup its only perform one action at a time.. for e.g. Hide button will hide columns and show button will show columns. But I want to develop toggle button with the name of "Mechanical/Side COP Mechanical Drawings" which hide and show subcolumns using one button only.
I think we need to see an example of this, and an explanation of what pressing the button does. Because you're using
rowspanin the header, you would need to hide all columns under the span, otherwise the styling will get messed up.Colin
@colin so here I just mentioned one column as an example - "Mechanical/Side COP Mechanical Drawings". But I need to make toggle buttons for multiple columns.
This is what I did using 'colvisGroup'.
Now as you know I made complex header using colspan rowspan...
I want to make toggle button for these 7 columns I mentioned below .. which can Hide and show subcolumns ( named planned, forecast, actual) for each of this.
Datatables knows about the
thelements that are in the row with the sorting elements. As Colin explained the other headers you will need to show/hide using Jquery or Javascript methods. You can use thecolumn-visibilityevent to see which columns were hidden or made visible. You can then hide or show the correspondingthelements.Kevin
@colin here I add HTML and JS code
live.datatables.net/cosuqeci/1/edit
I dont exactly apply CSS as we stored css in different file.
@kthorngren using column-visibility Event will display which columns were hidden or made visible. But I want to make Toggle Button for first 7 complex header which can hide group of subcolumns for each 7 complex header.
Is there any way that I can use "columnsToggle" and "colvisGroup" together to achieve what I am looking for ?
Thanks for the test case, but it doesn't run so we can't see the issue you want support with. Please can you take a look at that,
Colin
@colin I am sorry I am fetching data from database and not sure how I can set up everything in test case. Here is the link I made page public.. Let me know are you able to view it or not.
https://test.assettrack.cx/elevators/ele1.php
The page has this error:
Your header structure looks similar to this example. My suggestion is to start with that example. I copied the HTML tab from the example into this test case:
http://live.datatables.net/qirecoze/1/edit
I used the Download Builder to generate the proper CDN for colvis. If I understand correctly you want to toggle multiple columns. I used a Custom Button and
columns().visible()to toggle the columns within the HR group. Note use of the singularcolumn().visible()to get the current visibility of a column with in the group.If this isn't what you are looking for please try updating the test case to help us understand the requirements.
Kevin
@kthorngren Thank you so much for your help. Really appreciate. I tried same code and I am able to 'Hide' custom button but when I click again its not showing back hidden data. For e.g. in your example when you click on "HR Info button" first time it hides the group of column within HR info.. and when click again it displays those info again. But in my case its not showing.
Here is my Code
@kthorngren I am sorry my bad. Now I am able to successfully toggle the custom buttons. I am wondering as I have to make 7 buttons it will not look nice. Is there any way to make collection of all button in one button ? so when user click on that button it will display list of all custom buttons..so user can choose what ever column they want to hide or show ?
See this collections example. Sounds like this is what you want.
Kevin
@kthorngren Omg.. yes exactly thats what I want. Thank you so much you made my day.