With doc.defaultStyle.noWrap = true; I can noWrap the whole table when exporting to pdf. But how can I apply noWrap only to a certain column? So e.g. only to column 5 and 7 ?
{
extend: 'pdfHtml5',
text: 'PDF',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
},
customize: function(doc) {
doc.defaultStyle.noWrap = true;
}
}
Many thanks
Please describe exactly how to add a button that'll only refresh the current tab.
Ideally the Buttons plugin would offer a built-in Refresh button but it does not. We fetch data with "ajax": {"url":"getmyajax.foo"} so hopefully the process of adding a button that reloads it, and the tab itself, is moderately straightforward. Thanks :-)
We are using commas for decimal. If we export numbers with commas, for example 1,59 the number exports as 159.
The example works but it also format columns with strings. How can we format only columns with numbers?
{
extend: 'excel',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
return data.replace(',', '.');
}
}
}
}
I want to style the exported pdf. in the console.log(doc) I see some styled named tabelHeader,...
Is it possible to change these settings?
I tried with
customize: function(doc){
styles: {
tableHeader:{
fillColor:"#F0F8FF"
}
}
But this did not work.
Andreas
{extend: 'pdf', text: 'PDF'}
Hi,
my pdf button isnt showing up anymore. Unfortunatley I cannot say when (after which update) it happened. Every other export button (csv, excel, ...) is still visible!
I already tried the following:
nothing brought back my pdf button 
Any suggestion or is this behaviour already known?
When I use the "create new entry" for data input, I would like to open a new input form as soon as I submit the latter. This would allow for a more rapid input of data when I have multiple data entries.
Are there any examples that already show this?
i recently updated a site with ssl, so all links and pages now use https://
i use buttons and pdfmake to create an on the fly invoice creator, but the generated page (in chrome) indicates the page is not secure. its not really a big deal, as there is obviously no data input, but I wondered if there is anything I can do about it.
the generated url is data:application/pdf;base64,JV......
Hi folks,
I've noticed that when I export using the Buttons extension of Datatables, that it takes the value present in the cells (i.e. those given by the render option when it is specified) and not the actual data value of the cell. Is there a way to change this behavior? For example, if I have a cell that shows an image based on the value of the data, could I export with the value and not the image?
Thanks!
I have a page which is used to allow visitors to print off their own pdf invoices generated in situ
The page works great for FF and Chrome
I realised there are issues with older browsers, but when I use Edge for example, i get a blank page, and i can;t see anything in the debugger
I also tried updating to the latest version of pdf make (0.1.27)
Example page - https://www.cfci.org.uk/print_invoice.php?OrderID=8
Possible we can define the href attribute when creating a button? Having logic that if the href is defined, i.e. not a '#', then the anchor tag acts as normal else you preventDefault (which i assume you're doing now to perform the action of the button).
99% of the time we use Editor for our add/edit/delete. Though there's this small chance the form is too complex for Editor and we provide entire page dedicated to it. So by having the add button simply act like a normal anchor tag, would allow for this.
new $.fn.dataTable.Buttons(table, [
{text: 'Add', className: "add-contract", href: "<LINK HERE>"}
]);
The export with the pdfHtml5 Button works fine, but I have some problem to format the exported table.
I create a customize function like this:
{
extend: "pdfHtml5",
text: '<i class="fa fa-file-pdf-o text-red"></i>',
titleAttr: 'Export to PDF',
orientation: 'portrait',
pageSize: 'A4',
title: pdfTitle + showClubName,
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 8, 7, 8],
orthogonal: 'export'
},
customize: function(doc){
doc['styles'] = {
tableHeader: {
bold: !0,
fontSize: 11,
color: 'black',
fillColor: '#F0F8FF',
alignment: 'center'
},
athleteTable: {
//alignment: 'center'
},
column1: {
alignment: 'center'
},
title: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10],
alignment: 'center'
}
};
var cols = [];
cols[0] = {text: 'Athlete', alignment: 'left', margin:[15, 10, 10, 10] };
cols[1] = {text: moment().format('MMMM do YYYY, h:mm:ss'), alignment: 'right', margin:[10, 10, 15, 15] };
var objHeader = {};
objHeader['columns'] = cols;
doc['header'] = objHeader;
doc['content']['1'].layout = 'lightHorizontalLines';
doc['content']['1'].table.widths = ['2%', 140, 10, 15, 25, 20, 140, 20];
doc['content']['1'].style = 'athleteTable';
var objFooter = {};
objFooter['alignment'] = 'center';
doc["footer"] = function(currentPage, pageCount) {
var footer = [
{
text: 'A .. Active, I .. Inactive',
alignment: 'left',
color: 'red',
margin:[15, 15, 0, 15]
},{
text: 'Page ' + currentPage + ' of ' + pageCount,
alignment: 'center',
color: 'blue',
margin:[0, 15, 0, 15]
},{
text: '',
alignment: 'center',
color: 'blue',
margin:[0, 15, 15, 15]
}
];
objFooter['columns'] = footer;
return objFooter;
};
}, className: 'btn btn-default'
}
and I want the column 8 the alignment to center and the color in red. The pdfmake documentation say to set the column style with a defined style, that set to the output text. { text: 'This is a header', style: 'header' } but I did not know how can I set it to the specific column,
I tried with the orthogonal export like this
{ data: "active", width: '7%', render: function(data, type, row){
if(type === 'display'){
return (data == true)? '<i class="fa fa-check text-green" aria-hidden="true"></i>' : '';
}else if(type == 'export'){
return (data == true)? '<span class="text-green">A</span>' : 'I';
}else{
return (data == true)? 'A' : 'I';
}
}, className: 'text-center'
}
But that did not work. Any idea how can I set the style to the column pdf output?
Andreas
I have used this method before but for some reason it is not working on this page and I am not sure what the problems is.
If I post an actual integer value the data is sent to the page without any problems. I can see this using the firebug app. and the post is there and being sent to the correct page. However this will not take place when I ask it to send the data ['pdflocation.pdf_id']. This data is there since, again, it shows up in the XHR RESPONSE in Firebug.
Here is a sample of the XHR response I see with the data:
{"DT_RowId":"row_28224","pdflocation":{"pdflocid":"28224","locid":"7","pdf_id":"8875","prodname"
:"3M Brand Fire Barrier CP-25 WB+ Formulation B (09-5540-1)","prodidentifier":"156, Plant","prodtype"
:"Adhesive","ref4":"","ref5":""},"product_name":{"pdfprodname":"3M Brand Fire Barrier CP-25 WB+ Formulation
B (09-5540-1)","pdffilename":"150509PU002.pdf","pdfmanufacturer":"3M Canada Company","pdfcasno":"12447-61-9
1344-09-8 1241-94- 1309-37-1","pdfeffectdate":"2006-08-01","pdfexpiredate":"9999-12-31","pdfstatus"
:"Y","pdfcontrolled":"N"}}
As I mentioned, I have used this method to post before and it has worked without a problem. I am wondering if the problem lies with the "dot" term in the data ['pdflocation.pdf_id'] term I'm using? I have to use this as this data is the result of a join between two tables (product_name and pdflocation). The Delete button is where this problem is occuring. The button appears at the end of each row of the table and when DELETE is clicked I want the item removed from the pdflocation table and itemized on a second table that records this for future reference. The index I am sending to the serverside is crucial for this to be tracked.
This is only part of the page since it is long and think this is the essential part pertaining to this question. Any advice would be really appreciated.
var table = $('#table_products').DataTable( {
ajax: {
url: "./serverSideEditLocation2_data.php",
type: "post",
"data": {
"locid": <?php echo $locid ?>
}
},
"serverSide": true,
"processing": true,
"deferRender": true,
"lengthMenu": [[100, 1, 5, 10, 25, 50, 75, -1],[100, 1, 5, 10, 25, 50, 75, "ALL"] ],
"pagingType": "full_numbers",
//This block sets the scrolling function and table display length
"scrollY": "300px",
"scrollCollapse": true,
"dom": '<B"clear"f>irt<"bottom"p><"clear">',
columns: [
{ data: null, defaultContent: '', orderable: false, searchable: false, target: 0 },
{ data: "pdflocation.pdf_id", target: 1 },
{ data: "product_name.pdfprodname", target: 2 },
{ data: "product_name.pdfmanufacturer", target: 3 },
{ data: "product_name.pdfcasno", target: 4 },
{ data: "product_name.pdfeffectdate", target: 5 },
{ data: "pdflocation.prodname", target: 6 },
{ data: "pdflocation.prodidentifier", target: 7 },
{ data: "pdflocation.prodtype", target: 8 },
{ data: "pdflocation.ref4", target: 9 },
{ data: "pdflocation.ref5", target: 10 },
{ data: "product_name.pdfexpiredate", target: 11},
{ data: "product_name.pdfcontrolled", target: 12 },
{ data: null, defaultContent: '<button class="delete" style="border:1px solid #666;\n\
font-size:12px;\n\
font-weight:bold;\n\
cursor: pointer;\n\
-webkit-border-radius: 2px;\n\
-moz-border-radius: 2px;\n\
-ms-border-radius: 2px;\n\
-o-border-radius: 2px;\n\
border-radius: 2px;\n\
text-decoration: none !important;\n\
-webkit-box-shadow: 1px 1px 3px #999;\n\
-moz-box-shadow: 1px 1px 3px #999;\n\
-ms-box-shadow: 1px 1px 3px #999;\n\
-o-box-shadow: 1px 1px 3px #999;\n\
box-shadow: 1px 1px 3px #999;\n\
background: orange;">DELETE</button>', orderable: false, searchable: false, target: 13 }
],
order: [[ 2, 'asc' ], [3, 'asc']],
// Removed the ColDefs to shorten post
$('#table_products').on( 'click', 'button.delete', function () {
var data = table.row( $(this).parents('tr') ).data();
var r = confirm("ALERT:\n\you are about to DELETE this entry");
if (r==true){
$.ajax({
"url":"./deleteItem_clientLocation.php",
"type": "post",
data:{
"pdfID": data['pdflocation.pdf_id']
}
});
table.draw();
}
});
Hello everbody,
I have two questions regarding customize function in excel export.
1) The example on the homepage of datatables (Excel - Cell background)
https://datatables.net/extensions/buttons/examples/html5/excelCellShading.html
doesn't work if I'm trying to export the excel file. No cell has a blue background. See attached file Datatables_request_1.PNG.
2) The customize function doesn't work if I'm exporting the excel with new added row. See the attached file Datatables_request_2. Why is there second row with "Exported data"? And why ist there first empty row although I don't define "tittle"? See https://jsfiddle.net/0k7zbggn/.
Thanks in advance for answers.
Best Regards!
Hello when using this module its hiding the record count(10/25/100) per page. How can i fix this to see the two of them same time?
Here is mi code in php:
. '<script type="text/javascript" charset="utf-8" src="\DateTables\datatables.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/plug-ins/1.10.15/sorting/datetime-moment.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/buttons/1.4.1/js/buttons.flash.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>'
. '<script type="text/javascript" charset="utf-8" src="////cdn.datatables.net/buttons/1.4.1/js/buttons.print.min.js"></script>'
. '<script type="text/javascript">'
. '$(document).ready( function () {$.fn.dataTable.moment( "DD/MM/YYYY HH:mm:ss" ); $("#table_id").DataTable({dom: "Bfrtip",buttons: ["csv", "excel", "pdf", "print"]});} );</script>'
I'm a beginner with datatables and trying to use it with angular. The table is working fine but I am struggling to add the export buttons I require.
Here is the html:
<link href="././css/generalStylesheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.print.min.js"></script>
<div class="loader dispNone ng-scope">
<div class="overlay"></div>
<px-spinner class="x-scope px-spinner-0" style="width:80px; height:80px;">
<div id="Wrapper" class="spinner style-scope px-spinner" style="width:80px; height:80px;"></div>
</px-spinner>
</div>
<div style="flex:1;">
<div class="tableSpacing">
<span style="font-size: 20px;font-weight: bolder;">Manager</span>
<div class="successMsg">
{{successMessage}}
</div>
<table id="allUsers" class="display" width=98%>
<thead>
<tr>
<th>SSO</th>
<th>Name</th>
<th>Email</th>
<th>Last Login</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Here is the angular/javascript:
define(['jquery','angular', '../module', 'datatable'], function (jquery, angular, controllers, datatable) {
// Controller definition
controllers.controller('ManagerCtrl', ['customerportalService','$state','$scope','$http','$timeout', function (customerportalService, $state, $scope, $http, $timeout) {
$scope.successMessage = "";
$scope.successMessage = "";
$scope.allUsersDTData = [];
$scope.createUserObj = [{}];
angular.element('#allUsers').dataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
customerportalService.allUsers().then(function(allUsersData) {
_.each(allUsersData, function(singObj){
$scope.allUsersDTData.push([
singObj.sso,
singObj.fullName,
singObj.email,
singObj.lastLogin,
singObj.role,
singObj.status
]);
});
angular.element('#allUsers').dataTable().fnAddData($scope.allUsersDTData);
}]);
});
Any guidance why its not displaying and what I'm doing wrong?
I am using the Editor extension with Edit, Remove, and New buttons. When one or more rows are selected, I want to always Edit but not necessarily Remove the selected rows, based on a column value. I think I need to override an event a row is selected, examine the row content to see whether or not to enable the Remove button---something along those lines. But I also want to do the default behavior when a row is selected (i.e. enable the Edit button, highlight the row, and whatever else may be happening).
Hello,
I am using the excel export but would like a dialog box to come up asking for a name and location of the file they want to export. I know how to change the name, but can't seem to find out how to "interrupt" the process. Here is what I have so far when I declare the button. I tried 'init:' but that came too early. fnClick doesn't seem to work in this instance, nor does the word 'click'. I would replace the alert call with the necessary code to bring up the dialog. Thanks for any input. -Gabe
var buttonsObj = [ {
extend: 'excel',
className: 'ExcelButton',
text: "",
titleAttr: 'Export to Excel',
fnClick: function(dt, node, config){
alert('hello');
}
},]
Hi Team,
I am using latest version of DataTable.
I am facing issue realted to print button. I am calling my data by Ajax url and when I print the record it prints only current list records. Just Like if I am searching something which gives me 15 record and pagination is selected as 10 Rows. SO on print it prints only 10 records.
So how can I make DataTable which prints all record and doesn't go for pagination?
I am using following code.
//---------------------------------------------
processing: true,
serverSide: true,
ajax: {
url: "AJAX URL",
type:"POST"
},
buttons: [
{
extend: 'print',
autoPrint: false,
}
],
//---------------------------------------------
I have tested my code by removing "serverSide: true ". Then It works according to my requirements.
But How can I do it without remove serverside processing.
Thank you in advance
Hi guys.
I have a problem with styling the PDF export button. I use the pdfhtml5 button.
I only want to style the export button to fit it to the page.
I have already changed things in buttons.dataTables.min.css but I am not able to change the :hover style.
Thank you for your help.
I've got a working angular DataTables for my registered users but I want to add the buttons to download the table etc.
There are no errors being thrown...
HTML:
<link href="././css/generalStylesheet.css" rel="stylesheet" type="text/css">
<script src="../bower_components/datatables.net-buttons/js/dataTables.buttons.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.colVis.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.flash.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.html5.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.print.js"></script>
<div class="loader dispNone ng-scope">
<div class="overlay"></div>
<px-spinner class="x-scope px-spinner-0" style="width:80px; height:80px;">
<div id="Wrapper" class="spinner style-scope px-spinner" style="width:80px; height:80px;"></div>
</px-spinner>
</div>
<div ng-if="isManager()" class="displayFlex">
<div style="flex:1;">
<div class="tableSpacing">
<span style="font-size: 20px;font-weight: bolder;">Manager</span>
<div class="successMsg">
{{successMessage}}
</div>
<table id="allUsers" class="display" width=98%>
<style scoped>
@import "../bower_components/datatables.net-dt/css/jquery.dataTables.css";
@import "../css/modal.css";
@import "../bower_components/datatables.net-buttons-dt/css/buttons.dataTables.css";
</style>
<thead>
<tr>
<th>SSO</th>
<th>Name</th>
<th>Email</th>
<th>Last Login</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
JS:
define(['jquery','angular', '../module', 'datatable'], function (jquery, angular, controllers, datatable) {
// Controller definition
controllers.controller('ManagerCtrl', ['customerportalService','$state','$scope','$http','$timeout', function (customerportalService, $state, $scope, $http, $timeout) {
$scope.successMessage = "";
$scope.successMessage = "";
$scope.allUsersDTData = [];
$scope.createUserObj = [{}];
//angular.element('#allUsers').dataTable();
angular.element('#allUsers').dataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
customerportalService.allUsers().then(function(allUsersData) {
_.each(allUsersData, function(singObj){
$scope.allUsersDTData.push([
singObj.sso,
singObj.fullName,
singObj.email,
singObj.lastLogin,
singObj.role,
singObj.status
]);
});
angular.element('#allUsers').dataTable().fnAddData($scope.allUsersDTData);
}]);
});
Anyone see why the buttons do not work or the mistake I'm making?
Sorry I am a beginner!