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.
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 data in my SQLite table and it has 985 rows, so I used DataTable to organise (searching and export to Pdf, CSV...), the problem is that the DataTable is limited rows and just shows the first 200 rows!.
my code is
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
the data is stored in table Sqlite
and in the HTML page:
so what's the solution with?
There is more than one option for this:
You can use the paging option and set it to false, or you can use the pageLength option to choose how many results you want to show on one page.
paging:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
paging: false,
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
pageLength:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
"pageLength": 1000,
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
There are number of plugins of Javascript that can export table data. Take the example of this. Can I add dropdown value to select number of rows in every page? In default setting there are 10 rows/page. I want to increase this to 20. I tried several options but couldn't make it.
Something has to be added on this
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
Continuation to Rio answer.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
"pageLength": 50,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print', 'pageLength'
]
} );
} );
The example in documentation is here
https://datatables.net/reference/option/pageLength
$('#example').dataTable( {
"pageLength": 50
} );
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