I am using DataTables 1.10+ with Buttons' column visibility module (colvis) and would like to have the hidden columns in a collapsable child row, the same way Responsive extension does in the 'details' row. I don't want the responsivity though.
Is it possible to use only that 'child-row' functionality of responsive Plugin or to "turn off" responsivity automatic column-visibility adjusments based on window width?
In short:
colvis
is needed to allow the user show and hide columns Responsive plugin child-row:
My DataTables init:
var oTable = $('#table_sd').DataTable({
'dom': 'Rrilp<"clear">ti<"clear">lp',
'processing': true,
'deferRender': true,
'Paging': true,
'pagingType': 'input',
'displayLength': 25,
'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Alle']],
'ordering': true,
'stateSave': false,
'responsive': false,
'columnDefs': [
{
'targets': [ 1, 2 ],
'orderable': false,
'searchable': false
}
],
'buttons': [
$.extend( true, {}, buttonCommon, {
'extend': 'print',
'text': 'Print',
'exportOptions': {
}
}),
{
'extend': 'collection',
'text': '<i class="icon fa fa-share-square-o"></i><span class="label">Export ...</span>',
'collectionLayout': 'fixed one-column',
'buttons': [
$.extend( true, {}, buttonCommon, {
'extend': 'copy',
'text': 'Copy'
}),
$.extend( true, {}, buttonCommon, {
'extend': 'excel',
'text': 'XLSX (Excel)'
}),
$.extend( true, {}, buttonCommon, {
'extend': 'csv',
'text': 'CSV (Excel)'
}),
$.extend( true, {}, buttonCommon, {
'extend': 'pdf',
'text': 'PDF A4',
'orientation': 'landscape',
'pageSize': 'A4'
}),
$.extend( true, {}, buttonCommon, {
'extend': 'pdf',
'text': 'PDF A3',
'orientation': 'landscape',
'pageSize': 'A3'
})
]
},
{
'extend': 'colvis',
'text': 'Show / Hide columns ...',
'columns': ':gt(5)',
'collectionLayout': 'fixed three-column',
'prefixButtons': [
{
'extend': 'colvisGroup',
'text': '<strong>All</strong>',
'show': ':hidden'
},
{
'extend': 'colvisGroup',
'text': '<strong>Default minimal</strong>',
'show': ':lt(7)',
'hide': ':visible:not(:lt(7))'
}
]
}
],
'colReorder': {
'realtime': false,
'fixedColumnsLeft': 6
}
});
Thanks
Luckily for you, DataTables 1.10 has that functionality.
See DataTables' Child Rows: https://datatables.net/examples/api/row_details.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With