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
Add 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'
}
]
});
Related
buttons: [
{
extend: "edit",
className: 'btn btn-primary bg-purple text-white',
editor: editorEdit
},
{
extend: 'excelHtml5',
text: 'EXPORT',
filename: 'DataSet',
className: 'btn btn-primary bg-purple text-white',
autoFilter: true,
exportOptions: {
modifier: {
selected: true
},
columns: 'th:not(:first-child)'//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
},
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s','22');
}
}]
However, the autoFilter and the customize options are not being reflected in the excel export.
Am I missing something or do I need to do it differently?
I want to make the header part of the pdf file as in the figure, but the logo image is too small. When you want to increase its width, the picture disappears. can you help me.
http://live.datatables.net/jatobaqi/227/edit there is my code
enter image description here there is result
$(document).ready( function () {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
className: 'pdf-buton',
customize: function ( doc ) {
var now = new Date();
var jsDate = now.getDate()+'/'+(now.getMonth()+1)+'/'+now.getFullYear();
doc['header']=(function() {
return {
columns: [
{
alignment: 'left',
italics: false,
bold: true,
text: ['RAPOR'],
fontSize: 25,
margin: [27,0,0,0]
},
{
image: 'image'
width: 30
}
],
margin: 10
};
});
doc['footer']=(function(page,pages) {
return {
columns: [
{
alignment: 'left',
text: ['www.---------.com']
},
{
alignment: 'right',
text: ['Sayfa ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: 20
};
});
doc.content.splice( 0, 1, {
margin: [ 0, 0, 0, 5 ],
alignment: 'left',
text: 'Firma/Şahıs:' + ' firma ',
fontSize: 12,
},{
margin: [ 0, 0, 0, 5 ],
alignment: 'left',
text: ['Tarih: ', { text: jsDate.toString() }],
fontSize: 12,
},
);
console.log(doc.content)
}
},
]
});
} );
You have to adjust marigns. It will work like that:
doc['header']=(function() {
return {
columns: [
{
alignment: 'left',
italics: false,
bold: true,
text: ['RAPOR'],
fontSize: 25,
marginTop: 10,
marginLeft: 30,
width:500
},
{
image: 'data:image/png;base64,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',
width: 62,
marginTop: 2,
}
],
};
});
I am trying to add page number in datatble pdf export, I got code from its official site after adding this code pdf button got disappearing and getting 'Uncaught ReferenceError: doc is not defined
at HTMLDocument' error in console.
$('#table2').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
title: 'Data export',
filename: 'dt_custom_pdf',
pageSize: 'A4',
exportOptions: {
columns: ':visible',
search: 'applied',
order: 'applied'
},
},
doc['footer']=(function(page, pages) {
return {
columns: [
'Left part of footer',
{
alignment: 'right',
text: [
{ text: page.toString(), italics: true },
' of ',
{ text: pages.toString(), italics: true }
]
}
],
margin: [10, 0]
}
});
]
});
You did not define customize function to dataTable that why getting doc error you need to change
$('#table2').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
text: 'Pdf',
filename: 'dt_custom_pdf',
pageSize: 'A4',
exportOptions: {
columns: ':visible',
search: 'applied',
order: 'applied'
},
customize: function ( doc ) {
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'center',
text: [
{ text: page.toString(), italics: true },
' of ',
{ text: pages.toString(), italics: true }
]
}
],
margin: [10, 0]
}
});
}
}
]
});
I am using echart( https://v-charts.js.org/#/en/ring ) in my vue js application. and i am trying to customize tooltip in ring chart. but i am not able to get. i want to display my own json data in tooltip when mouse over in the particular color.
Html code:
<ve-ring :data="OptionRingChart" :settings="chartSettings"></ve-ring>
Javascript code:
chartSettings: {
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'red', 'lightgreen'
];
return colorList[params.dataIndex]
}
}
},
label: {
normal: {
show: false
}
},
tooltip: {
show: true,
trigger: 'item',
position: ['35%', '32%'],
backgroundColor: 'implements',
textStyle: {
color: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 55,
},
},
},
OptionRingChart: {
color: ['green', 'red'],
columns: ['name', 'test'],
rows: [
{ 'name': 'D', 'test': 1 },
{ 'name': 'C', 'test': 2 }
],
},
You will want to utilize the tooltip.formatter
var option = {
tooltip: {
show: true,
trigger: 'item',
formatter: function (a) {
my_json_data = get_and_format_my_data()
return `${my_json_data}`
}
}
}
What I Need:
When user clicks on a reload button, then data should be reloded.
Example: http://docs.sencha.com/extjs/4.1.3/#!/example/charts/Pie.html.
The example has helped but I cannot reload data in pie chart. Here is my code:
Ext.onReady(function () {
store.loadData(generateData());
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
Ext.Msg.alert("click");
store.loadData(generateData());
}
},
{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
},
{
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'temperature',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('date');
});
this.setTitle(storeItem.get('temperature') + ': ' + storeItem.get('date') );
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'temperature',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});
I've also used a sencha example url: http://try.sencha.com/extjs/4.0.7/examples/charts/pie/viewer.html but it's not working.
I have to reload the data in charts. My data is loaded into the chart, but it is not able to be reloaded.
example-data.js code :
Ext.onReady(function() {
window.generateData = function(){
var data = [];
data.push(
{ temperature: 86, date: new Date(2014, 1, 4, 8) },
{ temperature: 20, date: new Date(2014, 1, 5, 7) },
{ temperature: 75, date: new Date(2014, 1, 1, 11) },
{ temperature: 10, date: new Date(2014, 1, 1, 7) },
{ temperature: 46, date: new Date(2014, 1, 1, 12) }
);
return data;
};
window.store = Ext.create('Ext.data.JsonStore', {
fields: ['temperature', 'date'],
data: generateData()
});
window.loadTask = new Ext.util.DelayedTask();
});
var chartId = Ext.getStore('myStore');
ChartId.refresh();
try once