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') ?>
