Exclude column from export in jQuery Datatables - datatables

I'm using jQuery datatable 1.10.11 and it's export button functionality as described here:
I want to skip last column from being export into excel file as this column has edit/delete buttons in it. My columns are generated dynamically so I can't use following method:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
}
]
});
I know this question is asked multiple time but non of them worked for me, might be version issue.

You can add a class:
<th class='notexport'>yourColumn</th>
then exclude by class:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':not(.notexport)'
}
}]
});

Try using CSS selector that excludes last column for columns option.
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: 'th:not(:last-child)'
}
}
]
});

I just thought I'd add this in because the accepted answer only works to exclude if you are not already including something else (such as visible columns).
In order to include only visible columns except for the last column, so that you can use this in conjunction with the Column Visibility Button, use
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':visible:not(:last-child)'
}
}]
});
And if you want to explicitly add your own class:
$('#reservation').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export Search Results',
className: 'btn btn-default',
exportOptions: {
columns: ':visible:not(.notexport)'
}
}]
});

for Excel, csv, and pdf
dom: 'lBfrtip',
buttons: [
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> Excel',
titleAttr: 'Export to Excel',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
}
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i> CSV',
titleAttr: 'CSV',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
titleAttr: 'PDF',
title: 'Insurance Companies',
exportOptions: {
columns: ':not(:last-child)',
},
},
]

You can try this code, I copied it from PDF button.
E.g columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ].
Check this documentation: https://datatables.net/extensions/buttons/examples/html5/columns.html
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8]
}
},
'colvis'
]

Javascript Part:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
exportOptions: {
// columns: ':visible' or
columns: 'th:not(:last-child)'
}
},
'colvis'
],
columnDefs: [ {
targets: -1,
visible: false
} ]
} );
} );
And the js files to be included:
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js
Hope this was helpful for you.
Thanks.

Related

How to change Datatables button color with Bootstrap5?

I am creating websites with Datatables plug-in.
I want to change the button color, but I don't know the methods.
It is my code.
$(document).ready(function() {
$('#reportTable').DataTable({
buttons: [
'searchPanes',
'colvis',
{
extend: 'print',
split: [ 'pdf', 'excel','csv'],
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
fixedHeader: true,
columnDefs: [ { targets: [0,1,2,3,4,7,10], visible: true},
{ targets: '_all', visible: false },
{
orderable: false,
className: 'select-checkbox',
targets: 0
}
],
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
order: [[7, 'desc']],
"dom": "<'row mb-3'<'col-6 col-md-4'l><'col-6 col-md-4 'B><'col-6 col-md-4'f>>" +
"<'row my-4'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
});
});
It is the current button color.
current button color.
Thank you!
You should be able to do it by extending the button and adding a className property.
buttons: [
{
extend: 'searchPanes',
className: 'btn btn-danger'
},
{
extend: 'colvis',
className: 'btn btn-warning',
},
{
extend: 'print',
className: 'btn btn-success',
split: ['pdf','excel','csv']
}
],

Datatables not showing excel button in chrome

I am putting export excel buttons for my datatables as follow:
buttons: [
{
extend: "colvis",
className: "btn-sm",
columns: [ 1, 3, 4, 6, 7, 8, 9, 10, 11, 13, 15,17,19,21,23,25,27,29,31,33 ]
},
{
extend: "pageLength",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
{
extend: "excel",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
{
extend: "print",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
],
It is working fine in internet explorer for all buttons but for chrome, I don't see the excel button.
I don't see an error in the console unfortunately...
I have faced the same issue and added the following script in my file then it started showing the buttons.
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
I hope you have already added the scripts flash, html5 and print. Overall your script code will look like below.
https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js
You can check the working example here

datatables + hiding all columns button

in datatables I want to be able to hide all columns, but can't seem to get the syntax right.
This from the code below and the above link, creates a button that shows all the columns. Is there a way to write this so that I can hide all columns?
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
code:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: [ 1, 2 ],
hide: [ 3, 4, 5 ]
},
{
extend: 'colvisGroup',
text: 'HR info',
show: [ 3, 4, 5 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
}
]
} );
} );
i have tried something like the below with other permutations, but no joy, can anyone advise, and/or how I might find it in the documentation.
{
extend: 'colvisGroup',
text: 'Show None',
visibility: false
}
{
extend: 'colvisGroup',
text: 'Show None',
hide: [':gt(1)'],
//show: [0, 1, 2],
//hide: [0, 1, 2],
//hide: ['*']
}
this worked for me, only 2 column visible...
this worked for me, although I am not sure why the 0 does not show the first column. it also works to leave it blank show: [],
{
extend: 'colvisGroup',
text: 'Show None',
show: [0],
hide: ['*']
}
You first need to determine the number of columns bind in datatable and then set all columns visibility false at once.
var oTable = $('#example').DataTable();
var columnCounts = oTable.columns().nodes().length;
for ( var i=0; i<columnCounts; i++ ) {
oTable.fnSetColumnVis(i, false, false);
}

Datatables Export to CSV and Excel File Extension Missing

I followed the following example. However, whenever I click on the CSV and Excel file export button I only get a file without its extension. It would be cumbersome for my final users to manually add the file extension so I was wondering if there is something that needs to be fixed. I have already read the the source code in the example but I have not found anything different. The source code to create the table is pretty straightforward.
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
Thank you very much for your help.
I found out that I needed to add the title and extension options to the table code. If any of those is missing I would get a file without the appropriate extension.
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy',
{
extend: 'csv',
text: 'csv',
extension: '.csv',
exportOptions: {
modifier: {
page: 'current'
}
},
title: 'table'
},
'pdf',
'print',
{
extend: 'excel',
text: 'excel',
extension: '.xlsx',
exportOptions: {
modifier: {
page: 'current'
}
},
title: 'table'
}
]
} );
A solutions,
"aButtons": [
{
"oSelectorOpts": { filter: 'applied', order: 'current' },
"sExtends": "copy",
"sButtonText": "Copiar en Portapapeles"
},
{
"oSelectorOpts": { filter: 'applied', order: 'current' },
"sExtends": "xls",
"sButtonText": "Excel",
"sFileName": "*.xls" // <-- ADD THIS LINE
},
{
"oSelectorOpts": { filter: 'applied', order: 'current' },
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "RegES - Reportes ",
},
"print"
]
},

Can I modify Datatables PDF button to print table info and in landscape?

I have print, PDF and Excel buttons on my datatable. The table has quite a few columns, is there a way to create the PDF in Landscape? Also, is there a way to print the table info (re: Showing x to y of z)?
This seems to work for me ( I use button extensions)
"buttons": [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
PDF - page size and orientation
I'm assuming that you're using the TableTools extension for DataTables to enable saving as PDF. If not, get it and use it. From there, it's pretty simple. Here's an example:
With TableTools extension:
"tableTools": {
{
"sExtends":"pdf",
"sPdfOrientation": "landscape",
}
}
With Buttons extension (DataTables 1.10.8+):
$('#myTable').DataTable( {
buttons: [
{
extend: 'pdf',
text: 'Save as PDF',
exportOptions: {
modifier: {
orientation:'landscape'
}
}
}
]
} );
I answered my question in a comment... thought I should probably post an official answer:
I am not using TableTools as that's been retired. I used the following site to build the .js and .css files I use: https://datatables.net/download/#bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.8,b-1.0.1,b-html5-1.0.1,b-print-1.0.1,fh-3.0.0,rr-1.0.0
I got it working with the following:
$(document).ready(function() {
$('#instrumentsTable').dataTable({
stateSave: true,
autoWidth: true,
dom: 'Bfirtip',
buttons: [
'print', {
extend: 'pdf',
orientation: 'landscape'
},
'excel'
],
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}, {
"bSearchable": false,
"aTargets": [0]
}]
}).columnFilter(...etc)
Hope this is helpful to someone!
~~~Tracy
this can also work....
#check <<extend: "pdfHtml5" >> for pdf
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm"
},
{
extend: "excel",
className: "btn-sm"
},
{
extend: "pdfHtml5",
className: "btn-sm",
orientation: 'landscape'
},
{
extend: "print",
className: "btn-sm"
},
]