We Keep Coding

page number not working in datatable export to pdf

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]
}
});
}
}
]
});

add serial number column in datatable pdf export

I am working on e-commercial project using html and javascript in my project. As a part I need to show the details of product ordered. I am using Jquery datatable inorder show the details. I need to export the details from datatable to excel and using. this all works fine but the problem is I need to add serial number while exporting I tried several ways. Below is the export buttons
buttons: [
{
extend: "excel",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
},
{
extend: "pdf",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
},
]
I added my zero th column along with the pdf export. but this fails while export the pdf after filtering
please help me to solve this huddle? if any clarity need please comment I will do my best

your can custom fields in datatable on export to pdf or excel through below code.
buttons: [
{
extend: "excel",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
},
{
extend: "pdf",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
customize: function (doc) {
var col = doc.content[1].table.body;
for (i = 1; i < col.length; i++) {
col[i][0]["text"] = i;
}
},
},
]

How to limit jquery datatable export by 1000 rows

How to limit jquery datatable export by first 1000 rows. if data table contains more than 1000 rows and on clicking export button shall show an error message.
buttons: [
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> ' + 'haiexcel',
title: pageTitle,
exportOptions: {
orthogonal: 'export',
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
},
className: 'btn bg-color-yellow margin-right-5',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet.xml'];
$('row:first c', sheet).attr('s', '45');
}
}
]

How to disable column toggle for particular column of Datatable when it is hidden?

I am using Datatable plugin for my project. I have enabled colvis feature to help the table export. Now I want to hide few of the columns for a user using below script:
columnDefs : [
{ targets: 1, visible: (department == '6')||(department == '0'),
"searchable": false,className:'none' }
]
It works fine like column is hidden and it's not searchable too. But since I enabled colvis , the column name is visible in the list and when user selects hidden column, it will be displayed. Can any one suggest me how could I disable column toggle too ?
also tried specifying the column to exclude colvis but no use.
columnDefs : [
{ targets: 1, visible: (department == '6')||(department == '0'),
"searchable": false,className:'never', responsive: false ,colVis: {
exclude: [ 1 ]
}},
],
and below is my comple te datatable script.
$('#page_effect').fadeIn(2000);
var table = $('#testTable').DataTable({
mark: true,
responsive: true,
"dom": 'flit',
columns: [
{className: "group1"},
{className: "group2"},
{className: "group1"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
{className: "group2"},
],
dom: 'Bfrtip',
buttons: [{
extend: 'collection',
text: "More options",
buttons: [
'pageLength',
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
title: 'Book',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
title: 'Book',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
title: 'Book',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
title: 'Book',
text: 'Export selected',
exportOptions: {
columns: ':visible',
modifier: {
selected: true
}
}
},
{
extend: 'columnToggle',
text: 'Toggle Group1',
columns: '.group1'
},
{
extend: 'columnToggle',
text: 'Toggle Group2',
columns: '.group2'
},
'colvis',
],
}],
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, 250 ],
[ '10 rows', '25 rows', '50 rows', '250 rows' ]
],
columnDefs : [
{ targets: 1, hidden: (department == '6')||(department == '0'),
"searchable": false,className:'never', responsive: false ,
buttons:[
{
extend: 'colvis',
columns: ':gt(0)'
} ],
},
],
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true,
});

You need to specify which columns you want to be toggled by colvis.
Check out the reference on hiding columns and the reference on selecting columns
Since you know you want to hide the column with the id 1, you will need to add an extra option to your DataTable
colVis: {
exclude: [ 1 ]
}
Edit:
Try replacing
'colvis',
by
{
extend: 'colvis',
columns: ':gt(1)'
},
and removing
buttons:[{
extend: 'colvis',
columns: ':gt(0)'
}],
from the bottom part of your code

jQuery DataTable PDF export table cells has no borders

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'
}
]
});