How to I implement Keyboard shortcuts on multiple datatables? It only work on the first table
How to I implement Keyboard shortcuts on multiple datatables? It only work on the first table
mondi.janes
Posts: 4Questions: 2Answers: 0
function content(text, id) {
$('#pg-panel').load(text + '?si_lo=1', {}, function() {
var pg_t = document.getElementById('pg-t');
pg_t.innerText= text + ' report for Silo 1';
$("#btn_pdf").children().first().remove();
$("#btn-exel").children().first().remove();
$("#btn-csv").children().first().remove();
$("#btn-saveas").children().first().remove();
$("#btn-print").children().first().remove();
$("#btn-printcurrent").children().first().remove();
var table = $('#'+text).DataTable({
dom: 'lBfrtip',
scrollX: false,
scrollY: 600,
scrollCollapse: true,
buttons: [
{
extend: 'pdfHtml5',
className: 'export-btn1 text-left text-dark border-0',
text: '<a href="#" class="btn-herf" ><i class="fa fa-file-pdf-o text-danger"></i> PDF<i class="float-right">Shift + D</i></a>',
download: 'open',
key: {
shiftKey: true,
key: 'd'
},
footer: true,
messageTop: {
bold: true,
fontSize: 13,
color: 'blue',
fillColor: '#2d4154',
alignment: 'center'
},
message: {
text: '<?php if (isset($_POST["silo_submit"])) {
if(!empty($_POST["start_dt"]) && !empty($_POST["end_dt"])){
$sdate=date("m/d/Y", strtotime($_POST["start_dt"]));
$enddate=date("m/d/Y", strtotime($_POST["end_dt"]));
echo "From : ".$sdate." - ".$enddate;
}}else{
echo "as at ".date("Y-M-d");
} ?>',
bold: true,
fontSize: 10,
color: 'black',
fillColor: '#2d4154',
alignment: 'center',
margin: [0, 0, 0, 5]
},
customize: function(doc) {
doc.content.splice(0, 0, {
margin: [0, 0, 0, 5],
alignment: 'center',
});
console.log(doc.content)
},
}
],
drawCallback: function() {
/*var api = this.api();
$( api.table().column().footer()).html(
api.column( {page:'current'} ).data().sum()
); */
},
footer: function(currentPage, pageCount) {
return currentPage.toString() + ' of ' + pageCount;
},
header: function(currentPage, pageCount, pageSize) {
// you can apply any logic and return any valid pdfmake element
return [{
text: 'simple text',
alignment: (currentPage % 2) ? 'left' : 'right'
},
{
canvas: [{
type: 'rect',
x: 170,
y: 32,
w: pageSize.width - 170,
h: 40
}]
}
]
},
footerCallback: function(row, data, start, end, display) {
var api = this.api();
var intVal = function(i) {
return typeof i === 'string' ? i.replace(/[_\$,]/g, '') *
1 : typeof i === 'number' ? i : 0;
};
column = Object.keys(data[0]);
for (var ic = 1; ic < column.length; ic++) {
stotal = api
.column(ic)
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
pageTotal = api
.column(ic, {
page: 'current'
})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
$(api.column(ic).footer()).html('' + pageTotal + ' <br> ' +
stotal);
}
$(api.column(0).footer()).html('TOTAL');
},
});
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'excel',
className: 'export-btn1 text-left text-dark border-0',
text: '<a href="#" class="btn-herf" ><i class="fa fa-file-excel-o text-success"></i> Excel<i class="float-right">Shift + E</i></a>',
key: {
Id:id,
shiftKey: true,
key: 'e'
},
footer: true
},
]
});
table.buttons(1, null).container().appendTo(
'#btn-exel'
);
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'csv',
className: 'export-btn1 text-left text-dark border-0',
text: '<a href="#" class="btn-herf" ><i class="fa fa-file-csv "></i> CSV<i class="float-right">Shift + C</i></a>',
key: {
shiftKey: true,
key: 'c'
},
footer: true
}]
});
table.buttons(2, null).container().appendTo(
'#btn-csv'
);
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'print',
className: 'export-btn1 text-left text-dark border-0',
text: '<a href="#" class="btn-herf" >All<i class="float-right">Shift + P</i></a>',
key: {
shiftKey: true,
key: 'p'
},
footer: true
}]
});
table.buttons(3, null).container().appendTo(
'#btn-print'
);
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'print',
className: 'export-btn1 text-left text-dark bg-light border-0',
text: '<a href="#" class="btn-herf" >Current Page<i class="float-right">Ctrl+ Alt + P</i></a>',
exportOptions: {
modifier: {
page: 'current'
}
},
key: {
ctrlKey: true,
altKey: true,
key: 'p'
},
footer: true
}]
});
table.buttons(4, null).container().appendTo(
'#btn-printcurrent'
);
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'copy',
className: 'export-btn1 text-left',
text: '<a href="#" class="btn-herf" ><i class="fa fa-copy"></i> Copy<i class="float-right">Ctrl + C</i></a>',
key: {
ctrlKey: true,
key: 'c'
},
footer: true
}]
});
table.buttons(5, null).container().appendTo(
'#btn-saveas'
);
table.buttons(0, null).container().appendTo(
'#btn_pdf'
);
});
}
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@colin
Here is the test case
https://jsbin.com/bexamez/edit?html,css,js,console,output