I have added the default Excel button in my datatable.
Here's the script for it :
$('#searchResult').DataTable(
{
"dom": '<"top"lB>rt<"bottom"ip>',
buttons: [
{
extend: 'excel',
exportOptions:
{
columns: ':visible'
}
},
'colvis']
)}
And I've placed the button at the extreme right(top-side) above the data-table through the following css:
.dataTables_wrapper .dt-buttons {
float:right;
}
But I have no idea about how can I replace the Buttons with icons ( to improve the UI) while maintaining the same functionality. And how can I insert the icons at the exact same location as of the buttons??
Each button is enriched with a unique class - .buttons-excel etc, so you can very easy swap the inner content of a certain button with something else. Do this in the initComplete() callback. "Icons" can be many things, here an example using Font Awesome :
$('#example').DataTable( {
//...
initComplete: function() {
$('.buttons-copy').html('<i class="fa fa-copy" />')
$('.buttons-csv').html('<i class="fa fa-file-text-o" />')
$('.buttons-excel').html('<i class="fa fa-file-excel-o" />')
$('.buttons-pdf').html('<i class="fa fa-file-pdf-o" />')
$('.buttons-print').html('<i class="fa fa-print" />')
}
} );
produces something like this :
demo -> https://jsfiddle.net/6639xcj4/
You can make use of buttons.buttons.text option to show an icon in the button instead of regular text. Note also that the buttons.buttons.titleAttr option is used to specify a tooltip title for the button, which can improve accessibility, letting users know what the button does when they hover their mouse over the button.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
}
]
} );
} );
Demo
Related
i am trying to export data from a datatable to an excel file.
But everytime i use the excel button it changes the format of my numbers.
For example a 0,023 is copied to excel as a 23.
Is there a way to use the excel export button so that excel isnt changing the format?
The other things is that i use the datatable on different data from a DB. So the column isnt always the same which has to be formated. Even the User can select which column should be exported. So the Format sould be used.
So possible Datatable could look like:
A
B
C
abc
1
1,2
A
B
C
abc
1,2
dcf
Thx in advance.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var table = $('#tbl').DataTable( {
dom: "lfBptrip",
select: {
style: 'multi'
}
,
columnDefs: [
{
targets: 0,
className: 'noVis'
}
],
language: {
searchBuilder: {
button: 'Filter',
}
},
buttons:[
'searchBuilder',
{
extend: 'colvis',
columns: ':gt(0)',
collectionLayout: 'fixed columns',
text: 'Spaltenauswahl',
postfixButtons: [{
extend: 'colvisRestore',
text: 'Show All',
}, {
extend: 'colvisGroup',
text: 'Hide All',
hide: ':visible'
},
]
},
{
extend: 'copy',
text: 'Zwischenablage',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
text: 'Excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
pageSize: 'LEGAL',
orientation: 'landscape',
text: 'PDF',
exportOptions: {
columns: ':visible'
}
}
],
colReorder: true,
scrollX: true,
});
});
</script>
I have a Japanese characters in my table. If I use excel button for exporting, it works fine but when I do for CSV. The data or the texts is not correct anymore. Do anyone know how to fix this? Thanks.
Here is my table
And for exporting to CSV and excel
I just used the simple way of creating the buttons for export
buttons: [
{
extend: 'excel',
text: 'Export to Excel',
className: 'btn btn-default',
exportOptions: {
columns: ':not(.notexport)'
},},
{
extend: 'csv',
text: 'Export to CSV',
className: 'btn btn-default',
exportOptions: {
columns: ':not(.notexport)'
},}
],
I have excel button of data table and I want to change name of that button.
I am trying like this
$(document).ready(function() {
$('#loading_sheet_table').DataTable({
"paging": false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
name: 'export to excel'
}
]
});
});
But name not change and I want to add icon after name.
<i class="fa fa-file-excel-o" aria-hidden="true"></i>
You can do this to get the desired thing
$(document).ready(function() {
$('#loading_sheet_table').DataTable({
"paging": false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Export to excel',
className: 'btn btn-default btn-xs'
}
]
});
});
I hope you can style your icon using the class.
How can I print custom elements using Print button from DataTable?
Here is an example: JSFIDDLE
I want to when you press "Print", this code go to print too:
<div id="PRINT_HERE_TOO" class="test">
<h1>
Print Here Too!
</h1>
</div>
Was I clear? Thanks!
use this as JavaScript in you code and see how can be customized to your needs.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend(
'<div>xxxxxxxxxxxxxxxxxxxxxxxx</div><img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
}
]
} );
} );
<script>
$(document).ready(function () {
$('.dataTables-example').DataTable({
pageLength: 10,
responsive: true,
dom: '<"html5buttons"B>lTfgitp',
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel', title: 'MonthlyReport' },
{ extend: 'pdf', title: 'MonthlyReport' },
{
extend: 'print',
customize: function (win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '14px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', '14px')
.css('color','black') ;
}
}
]
});
});
</script>
I'm trying to dynamically change the export title for datatable file export. I found a solution including AngularJS which I'm not going to be able to use. Is there a solution just using jquery?
Here is where I initialize the buttons:
var oTable = $("#standards").DataTable({
dom: 'lBfrtip',
buttons: [
{
extend: 'csvHtml5',
title: titleFinal,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
title: titleFinal,
exportOptions: {
columns: ':visible'
}
}
],
I have a function makeTitle that returns a string built from the input string. Here is where I try to change the title after clicking a link.
$('ul').on('click', 'a', function () {
titleFinal = makeTitle('XYZ Standards Due for Testing, ');
oTable.buttons = [
{
extend: 'csvHtml5',
title: titleFinal
},
{
extend: 'excelHtml5',
title: titleFinal
}
];
oTable
.search('XYZ')
.draw();