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.janesmondi.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

Sign In or Register to comment.