I'm using jQuery DataTable to display a table. This table includes a "PDF Export" button. The export displays a PDF form but this form has no borders around the cells. It's just a text form (versus a table like Excel). I want something like: for each cell but I can't seem to find a way to do this. Can anyone help? My javascript code to set up this DataTable looks like the following:
$("table[id$='jQueryDataTable']").dataTable(
{
aLengthMenu: [
[10, 25, 50, 100, 200, -1],
[10, 25, 50, 100, 200, "All"]
],
iDisplayLength: -1,
dom: 'Blrftip',
buttons: [
{
extend: 'pdf',
title: 'Non Desctructive Inspection ' +
' DATE: ' + d,
pageSize: 'A2',
orentation: 'landscape',
exportOptions: { // This is IMPORTANT --- Monty
orthogonal: 'sort'
}//,
//function(){}
}
],
aoColumnDefs: [{
"aTargets": [0, 1, 2, 3, 4, 5, 6],
"defaultContent": "",
"ordering": true
}
});
Thanks in advance. Steve
I'm using jQuery DataTable to display a table. This table includes a "PDF Export" button. The export displays a PDF form but this form has no borders around the cells. It's just a text form (versus a table like Excel). I want something like: for each cell but I can't seem to find a way to do this. Can anyone help? My javascript code to set up this DataTable looks like the following:
$("table[id$='jQueryDataTable']").dataTable(
{
aLengthMenu: [
[10, 25, 50, 100, 200, -1],
[10, 25, 50, 100, 200, "All"]
],
iDisplayLength: -1,
dom: 'Blrftip',
buttons: [
{
extend: 'pdf',
title: 'Non Desctructive Inspection ' +
' DATE: ' + d,
pageSize: 'A2',
orentation: 'landscape',
exportOptions: { // This is IMPORTANT --- Monty
orthogonal: 'sort'
}//,
//function(){}
}
],
aoColumnDefs: [{
"aTargets": [0, 1, 2, 3, 4, 5, 6],
"defaultContent": "",
"ordering": true
}
});
Thanks in advance. Steve
Share Improve this question asked Nov 21, 2016 at 19:08 stevekershawstevekershaw 1451 gold badge5 silver badges16 bronze badges 1- can you add your the JSON you are using for the table data and the HTML markup (initial not generated)? – Adrian Commented Nov 22, 2016 at 10:30
1 Answer
Reset to default 3Add this to customize function:
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .8; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 8; };
objLayout['paddingRight'] = function(i) { return 8; };
doc.content[0].layout = objLayout;
Complete datatable implementation is:
$('#datatable').DataTable({
lengthMenu: [
[4, 7, 10, 15, 20, -1],
[4, 7, 10, 15, 20, "Todo"]
],
responsive: true,
paging: true,
pagingType: "full_numbers",
stateSave: true,
processing: true,
dom: 'Blftirp',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF',
extension: ".pdf",
filename: "name",
title: "",
orientation: 'landscape',
customize: function (doc) {
doc.styles.tableHeader = {
color: 'black',
background: 'grey',
alignment: 'center'
}
doc.styles = {
subheader: {
fontSize: 10,
bold: true,
color: 'black'
},
tableHeader: {
bold: true,
fontSize: 10.5,
color: 'black'
},
lastLine: {
bold: true,
fontSize: 11,
color: 'blue'
},
defaultStyle: {
fontSize: 10,
color: 'black'
}
}
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .8; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 8; };
objLayout['paddingRight'] = function(i) { return 8; };
doc.content[0].layout = objLayout;
// margin: [left, top, right, bottom]
doc.content.splice(0, 0, {
text: [
{text: 'Texto 0', italics: true, fontSize: 12}
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
doc.content.splice(0, 0, {
table: {
widths: [300, '*', '*'],
body: [
[
{text: 'Texto 1', bold: true, fontSize: 10}
, {text: 'Texto 2', bold: true, fontSize: 10}
, {text: 'Texto 3', bold: true, fontSize: 10}]
]
},
margin: [0, 0, 0, 12],
alignment: 'center'
});
doc.content.splice(0, 0, {
table: {
widths: [300, '*'],
body: [
[
{
text: [
{text: 'Texto 4', fontSize: 10},
{
text: 'Texto 5',
bold: true,
fontSize: 10
}
]
}
, {
text: [
{
text: 'Texto 6',
bold: true, fontSize: 18
},
{
text: 'Texto 7',
fontSize: 10
}
]
}]
]
},
margin: [0, 0, 0, 22],
alignment: 'center'
});
},
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'CSV',
fieldSeparator: ';',
fieldBoundary: '"',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
text: '<i class="fa fa-print"></i>',
exportOptions: {
columns: ':visible',
}
},
{
extend: 'colvis',
postfixButtons: ['colvisRestore'],
collectionLayout: 'fixed four-column'
}
]
});