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
Related
This example of datatables has buttons to show/hide certain columns in the datatable.
When you first visit the page, all the columns are visible. Is there a way to make only certain columns visible, for example Office info, when you first visit the page?
$(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'
}
]
} );
} );
Fiddle here
ColumnDefs are used for table initialization, as they take less priority than your typical columns properties.
Perhaps columns.visible is the attribute you need?
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);
}
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.
I have yadcf working on DataTables in a jqueryUI tabbed environment. When you first load the page, it works correctly.
However, when you click away to another tab, then come back to the previous tab, DataTables blows up and sends the error:
TypeError: settingsDt is undefined from line 438 in jquery.dataTables.yadcf.js >(if (settingsDt.oSavedState != undefined && settingsDt.oSavedState.ColReorder >!== undefined) {...)
I have a demo up for you to look at: www.novobpm.com/yadcf
Click on the "Part Master" tab, it works. Then click on "Part Alerts." All is OK.
Now go back to "Part Master" and it'll blow up. The error is in the console. Interestingly, if you now click on "Part Alerts" again, that table is blown up.
var oTable;
oTable = $('#part_master').DataTable( {
ajax: 'tables/parts/table.part_master.php',
dom: 'B<"clear">frtip',
pagingType:'full_numbers',
order: [[ 0, 'asc' ]],
processing: true,
pageLength : 10,
searching: true,
columns: [
{ data: 'part_master.part_number' },
{ data: 'part_master.part_description' },
{ data: 'part_master.part_status' },
{ data: 'part_master.add_leadtime_days' },
{ data: 'part_master.add_leadtime_name' },
{ data: 'part_master.max_pph' }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor }//,
],
InitComplete: function (settings, json) { }
} );
yadcf.init(oTable,[{
column_number: 0,
filter_type: "multi_select",
select_type: 'chosen'
}, {
column_number: 1,
filter_type: "auto_complete"
}, {
column_number: 2
}, {
column_number: 3
}, {
column_number: 4
}, {
column_number: 5,
filter_type: "range_number_slider"
},
]);
Go grab 0.9.0.beta.7 should work now.
Next time you get an error in browser console, feel free to open an issue
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"
},
]