jquery data table

i have created vf page with jquery .jquery exporttoexcel button working fine in google chrome classic and lightning and Firefox classic.but exporttoexcel button not working in lightning.
<apex:page controller="ContractAnalysisReport1" sidebar="false" showHeader="true" readOnly="true" >
    <apex:form >
        <html>
            <head>
                <apex:slds />
                <apex:includescript value="//code.jquery.com/jquery-1.12.4.min.js" / >
                <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
                <apex:includeScript value="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"/>
                <apex:stylesheet value="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
                <apex:stylesheet value="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
                <apex:includescript value="//code.jquery.com/jquery-1.12.4.js"/>
                <apex:includescript value="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"/>
                <apex:includescript value="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"/>
                <apex:includescript value="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"/>
                <apex:includescript value="//cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"/>
                <apex:includescript value="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"/>
                <apex:includescript value="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"/>
                <apex:includescript value="//cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"/>
                <apex:includescript value="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"/>
                <apex:includescript value="//cdn.datatables.net/buttons//js/buttons.html5.min.js"/>
                <apex:includescript value="//code.jquery.com/jquery-1.12.4.min.js" / >
                <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
                <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
                
                <style>
                    .standard-grid, .standard-grid td, .standard-grid th {
                    border:1px solid rgb(216, 221, 230);
                    }
                    .standard-grid1, .standard-grid1 td, .standard-grid1 th {
                    border:1px solid rgb(216, 221, 230);
                    }
                    .full-width {
                    width: 100%;
                    }
                    .brandPrimaryBrd
                    {
                    width: 98% !important;
                    overflow: auto;
                    margin: 0px auto;
                    }
                    .dt-buttons
                    {
                    height: 34px;
                    }
                    select {height:30px !important;
                    background-color: #fff;
                    color: #16325c;
                    }
                    .dataTables_filter input {height:30px !important;
                    background-color: #fff;
                    color: #16325c;
                    border: 1px solid #d8dde6;
                    border-radius: .25rem;
                    width: 70%;
                    transition: border .1s linear,background-color .1s linear;
                    display: inline-block;
                    padding: 0 1rem 0 .75rem;
                    line-height: 1.875rem;
                    min-height: calc(1.875rem + (1px * 2));
                    }
                    .buttons-html5{    padding-left: 1rem !important;
                    padding-right: 1rem !important;
                    text-align: center !important;
                    vertical-align: middle !important;
                    border: 1px solid #d8dde6 !important;
                    background-color: #fff !important;
                    font-weight: bold;
                    }
                    #contacttable2_wrapper{
                    }
                    #contacttable2 th{white-space: normal;}
                    #contacttable th{white-space: normal;}
                </style>
                <script>
                    j$ = jQuery.noConflict();
                    j$(document).ready( function () {
                    var contactTable = j$('[id$="contacttable"]').DataTable({
                    "dom": 'Blftip',
                    "sScrollY": "500px",
                    "sScrollX": "100px",
                    "scrollCollapse": true,
                    lengthMenu: [[ 10, 25, 50,100, -1 ],[ '10', '25', '50','100', ' All' ]],

                    buttons: [
                    {
                    extend: 'excelHtml5',
                    text: '<img src="https://www.questionpro.com/images/qphome/tour/sample-reports/MSExcelExport.png" style="height: 20px;"> Export to Excel',
                    filename: 'Contract Analysis Report',

                    exportOptions: {
                    modifier: {
                    page: 'current'
                    }
                    }
                    },
                    ],

                    initComplete: function() {
                    var api = this.api();
                    var select = j$('[id$=accountSelect1]');
                    $('[id$=accountSelect1]').prepend("<option value=''>None</option>").val('');
                    api.column(1).data().unique().sort().each( function ( d, j ) {
                    var tempValue=j$(d).text().trim();
                    if(tempValue != "")
                    {
                    select.append( '<option value="'+tempValue+'">'+tempValue+'</option>' )
                    }
                    } );
                    }
                    });

                    j$('[id$=accountSelect1]').change(function() {
                    var val = j$.fn.dataTable.util.escapeRegex(
                    j$(this).val()
                    );
                    contactTable.column(1)
                    .search( val == '' ? '' :val, true, false )
                    .draw();
                    });

                    j$('[id$=job]').change(function() {

                    var val = j$.fn.dataTable.util.escapeRegex(
                    j$(this).val()
                    );
                    contactTable.column(4)
                    .search( val == '' ? '' :val, true, false )
                    .draw();
                    });



                    j$('[id$=outcome]').change(function() {

                    var val = j$.fn.dataTable.util.escapeRegex(
                    j$(this).val()
                    );
                    contactTable.column(5)
                    .search( val == '' ? '' :val, true, false )
                    .draw();
                    });



                    });








                </script>

February 22, 2018
·
Answer
·
Like
0
·
Follow
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

jquery data table

You need to sign in to do that.