I am using a Codeigniter and ajax request with DataTable to fetch data and trying to print the data using DataTable print export option. But footer is not appearing in the print.
How can i include the footer in printing with DataTable?
Here is my code:
function data_table_report(dateselected){
$("#dataTables-report").dataTable().fnDestroy();
table = $('#dataTables-report').DataTable({
"ajax": {
"url": "<?php echo site_url('patients_report/dataTable_report/')?>"+dateselected,
"type": "POST",
},
responsive: true,
bInfo: false,
dom: 'Bfrtip',
buttons: [{ extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'],
columnDefs: [ {
targets: -1,
visible: false}
]
});
}
Add this:
buttons: [{ extend: 'print', footer: true }]
Add footer property as shown below
buttons: [{ extend: 'print',
footer: true,
exportOptions: {
columns: ':visible'
}
}]
Try this:
"fnInitComplete": function (oSettings, json) {
myfooter = this.find('tfoot')[0].innerHTML;
new $.fn.dataTable.Buttons( this, {
buttons: [
{
extend: 'print',
exportOptions : {
columns: ':not(.notForPrint)'
},
customize: function ( win ) {
$(win.document.body)
.css( 'font-size','10pt')
.css( 'font-family','arial');
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
$(win.document.body).find('tfoot')[0].innerHTML = myfooter ;
win.print();
setTimeout(win.close(),500);
}
}
]
});
this.DataTable().buttons().container().insertBefore( '#example_filter');
},
Related
I am using datatables and it working fine in desktop but in mobile there is no data load to table. What is the problem?
Here is my code:
$('#users-table').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
scrollY: 300,
destroy: true,
processing: true,
serverSide: true,
responsive:true,
ajax: '/depart/get_datatable/',
columns: [
{ data: 'depart_name', name: 'departs.depart_name' },
{ data: 'levels', name: 'departs.levels' },
{ data: 'name', name: 'colleges.name' },
{ data: 'action', name: 'action',searchable:false, sortable: false,
className: 'text-right' }
]
});
the solution is add cache :false to ajax call
ajax:{
url:......,
cache:false
}
I'm new in DataTables and I have a simple datatable for which I'm trying to add a Font Awesome fa-info-circle image instead of one column header by using render like:
table = $("#datatable-buttons").DataTable({
data: document.pvm.tableContent(),
columns: [
{ data: "Info", render: function (data, type, full, meta) { if (type === 'display') return '<span style="font-size:75%" class="fa fa-info-circle"></span>' } },
{ data: "WiFi", title: "WiFi" },
{ data: "GPS", title: "GPS" },
],
fixedHeader: true,
dom: "lfBrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "excel",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "pdfHtml5",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "print",
className: "btn-sm"
},
],
});
But it seems that my icon instead of being just in the header for Info column, there is no icon in the header but in the data columns instead of the correct data. Is is possible to add a icon just for one field in the header?
I believe when you are saying "column header" you mean the title? render() is for rendering column data, you set the column header through the title property :
var table = $('#example').DataTable({
columnDefs: [{
targets: 0,
data: '0', //just use DOM
title: '<i class="fa fa-info-circle fa-lg"></i>'
}]
})
demo -> http://jsfiddle.net/6kp3tvpb/
title can be a function as well :
title: function() {
return '<i class="fa fa-info-circle fa-lg"></i>'
}
But notice that this callback only is called once.
I am getting this error Cannot read property 'oFeatures' of undefined datatables I am using bubble editing of datatable editor
<script type="text/javascript">
var editor;
$(document).ready(function(){
// use a global for the submit and return data rendering in the examples
editor = new $.fn.dataTable.Editor( {
ajax: 'http://52.77.155.163/web/index.php?r=ivision/productprices/datatable',
table: '#example',
fields: [ {
label: "Id:",
name: "id"
},
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
} );
$('#example').on( 'click', 'tbody td', function (e) {
var index = $(this).index();
if ( index === 0 ) {
editor.bubble( this );
}
});
var table=$('#example').DataTable( {
ajax: 'http://52.77.155.163/web/index.php?r=ivision/productprices/datatable',
dom: "Bfrtip",
scrollY: 300,
paging: false,
bSort: false,
columns: [
{ data: "id" },
{ data: "getcat(cat_id)" },
{ data: "getproduct(p_id)" },
{ data: "m_price" },
{ data: "c_price" },
{ data: "e_price" },
{
data: null,
defaultContent: 'Delete',
orderable: false
}],
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
} );
});
</script>
I am getting this error in console, Cannot read property 'oFeatures' of undefined . I am using bubble editing for datatables.net editor.
I also get this error.
It was the issue, Editor's table property is different DataTable Id.
After use same Id, it's fixed.
I am trying to print current filter from jQuery DataTable to a PDF.
I am searching for a solution but usually results are for TableTools but it's retired, so I am using Buttons.
With TableTools, I tried to apply this code:
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "Copy to clipboard",
"oSelectorOpts": {
page: 'current'
}
}
]
}
} );
From here https://datatables.net/extensions/tabletools/button_options#oSelectorOpts
And this is my code:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
download: 'open'
}
]
} );
} );
Already tried to change many times, still prints all the rows. What am i doing wrong?
You need to do something like this:
`
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"pagingType": "full_numbers",
"iDisplayLength": 10,
"dom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{'sExtends':'copy',
"oSelectorOpts": { filter: 'applied', order: 'current' },
},
{'sExtends':'xls',
"oSelectorOpts": { filter: 'applied', order: 'current' },
},
{'sExtends':'print',
"oSelectorOpts": { filter: 'applied', order: 'current' },
}
]
},
});
});
</script>
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"
},
]