Datatable export html5 button is not getting displayed in java web app project in IE11.

Datatable export html5 button is not getting displayed in java web app project in IE11.

arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0
edited August 2018 in Free community support

Hi Guys,
I have written the following code to get the excel html5 button in datatables. When I go to that particular page from our web app it is not showing.Although when I view source of the same page to get the html and run that html in browser ,everything is coming properly.I have checked the network in F12 ,everything is proper when loading that page in web app.
I have tried all the suggestions available in the forum and internet.It seems I am doing very bad mistakes,not able to figure out.Could u please help me out.I will be very thankful.

<!DOCTYPE html>
<html>
<head>  
    <title>DataTables example - jQuery UI styling</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <!--    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.jqueryui.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.jqueryui.min.css">-->
    
    <link rel="stylesheet" type="text/css" href="../jquery_js/DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css">"
    <link rel="stylesheet" type="text/css" href="../jquery_js/DataTables/Buttons-1.5.2/css/buttons.dataTables.min.css">
    <style type="text/css" class="init">
    
    </style>
    
    <script type="text/javascript" src="jquery_js/DataTables/jQuery-1.12.4/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="jquery_js/datatables.js"></script>
    <script type="text/javascript" language="javascript" src="jquery_js/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery_js/DataTables/Buttons-1.5.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery_js/DataTables/JSZip-2.5.0/jszip.min.js"></script>
<!--<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.jqueryui.min.js"></script>-->
    <!--<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.jqueryui.min.js"></script>-->
    
    <!--<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    
<script type="text/javascript" src="../jquery_js/DataTables/Buttons-1.5.2/js/buttons.flash.min.js"></script>-->
    <script type="text/javascript" language="javascript" src="jquery_js/DataTables/Buttons-1.5.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery_js/DataTables/Buttons-1.5.2/js/buttons.print.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery_js/DataTables/Buttons-1.5.2/js/buttons.colVis.min.js"></script>
    
  <!--
<script type="text/javascript" src="datatables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="datatables/pdfmake-0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="datatables/pdfmake-0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="datatables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>-->
    <script type="text/javascript" class="init">
    


$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
        'copyHtml5',
        'excelHtml5'
        ]
    } );

    table.buttons().container()
        .insertBefore( '#example_filter' );
} );



    </script>
</head>
<body class="wide comments example dt-example-jqueryui">
    <div class="fw-container">
        
        <div class="fw-body">
            <div class="content">
                
                <table id="example" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <td>Ashton Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                            <td>2009/01/12</td>
                            <td>$86,000</td>
                        </tr>
                        <tr>
                            <td>Cedric Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                            <td>2012/03/29</td>
                            <td>$433,060</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </tfoot>
                </table>
</div></div></div>
</body>
</html>

Note:Same thing is happening for pdf export as well.But i want to concentrate on excel first.

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    It looks like you've got all the libraries you need commented out.

    C

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0
    edited August 2018

    Dear Colin,
    Actually I had all those libs.It was not working then also.So I just tried to remove all those libs and kept the minimum required files for excel.The html is working properly.
    The main thing I am not able to understand that the html is working fine but the same one when it becomes jsp in web app it is not working.Even copy and other button is coming properly.Only excel and pdf is not getting displayed.
    When I include the flash js then excel button is getting displayed that button is a flash button not the html 5 button.
    I can debug if u let me know the function name to display the excel button.
    Is there any chance of conflicting libs.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @arijitrccmca2008 ,

    Probably the easiest thing here would be if you could link to a running test case showing the issue so we can offer some help. 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

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0

    Dear Colin,
    Sorry to bother u again.
    Actually it is running in intranet network.So can not provide the link.
    Can u plz provide the link of the information on how to create a test case ....

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Ah, sorry, I posted the text without the link. here you go:

    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.

    C

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0

    Dear Colin,

    Thanks.
    I will try to use DataTables debugger to figure out and let u know.
    JSFiddle and other will not help I guess as I told that the html along with js is working fine.Pardon me if I am wrong.

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0
    edited August 2018

    Dear Colin,
    I have added that code for datatables debugger.But it is a security violation for me to upload anything from private web app.So I have built a small java web project and put the same code.After running in the tomcat server,excel button is properly getting displayed.So if I upload this one as the code is same will it be helpful to understand the error why it is not coming in another web app.If yes please let me know.

    One more info ,i have run the private app in chrome also.No success.Actually I thought it could be issue with IE11.But in chorme same problem persists.
    Is there any security things blocking any js function or something.
    It is really painful everything is working fine in a different java web app only my app is not able to display it although the code is very same.

    Just in case is it possible to show the excel button in other way and make it work.
    I can make excel ,pdf at server end but I want to do it at client end by js.
    May be I am wasting ur time .Pardon me but I need to make it work

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0

    Dear Collin ,
    Can u help me please.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @arijitrccmca2008 ,

    Without seeing the code working, it's hard to know what to suggest. As you can see in this example, it's working fine. Given you can't link to your page, could you modify my example, or create your own with your table config, so that we can take a look,

    Cheers,

    Colin

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0
    edited August 2018

    no success.
    i am pasting the html which has generated in response

    <HTML><HEAD><TITLE>DataTables - JS Bin</TITLE>
    <SCRIPT src="http://code.jquery.com/jquery-1.11.3.min.js"></SCRIPT>
    
    <SCRIPT language=javascript type=text/javascript src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></SCRIPT>
    <LINK rel=stylesheet type=text/css href="https://nightly.datatables.net/css/jquery.dataTables.css">
    <SCRIPT src="https://nightly.datatables.net/js/jquery.dataTables.js"></SCRIPT>
    
    <SCRIPT src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.js"></SCRIPT>
    <LINK rel=stylesheet type=text/css href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
    <SCRIPT src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></SCRIPT>
    
    <SCRIPT src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></SCRIPT>
    
    <META charset=utf-8>
    <SCRIPT language=JavaScript>
            $(document).ready(function() {
    
      $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [{
          extend: 'excelHtml5',
          customize: function ( xlsx ) {
            var sheet = xlsx.xl.worksheets['sheet1.xml'];
     
    
            $('row', sheet).each(function(x) {
              if ($('c[r=C'+x+'] t', sheet).text() === 'London') {
                $('row:nth-child('+x+') c', sheet).attr('s', '39');
              }
          });
          }
        }]
      });
    });
        </SCRIPT>
    

    </HEAD> <BODY style="ZOOM: 1" jQuery1113011434688335113913="11"> <DIV class=container> <DIV id=example_wrapper class=dataTables_wrapper class="dataTables_wrapper"> <DIV class=dt-buttons></DIV> <DIV id=example_filter class=dataTables_filter class="dataTables_filter"><LABEL>Search:<INPUT aria-controls=example jQuery1113011434688335113913="13" placeholder></LABEL></DIV> <TABLE role=grid aria-describedby=example_info id=example class="display nowrap dataTable" style="WIDTH: 100%" width="100%" jQuery1113011434688335113913="3"> <THEAD> <TR role=row> <TH tabIndex=0 aria-controls=example class=sorting_asc style="WIDTH: 190px" jQuery1113011434688335113913="4" tabindex="0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</TH> <TH tabIndex=0 aria-controls=example class=sorting style="WIDTH: 266px" jQuery1113011434688335113913="5" tabindex="0" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending">Position</TH> <TH tabIndex=0 aria-controls=example class=sorting style="WIDTH: 163px" jQuery1113011434688335113913="6" tabindex="0" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending">Office</TH> <TH tabIndex=0 aria-controls=example class=sorting style="WIDTH: 119px" jQuery1113011434688335113913="7" tabindex="0" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">Age</TH> <TH tabIndex=0 aria-controls=example class=sorting style="WIDTH: 215px" jQuery1113011434688335113913="8" tabindex="0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending">Start date</TH> <TH tabIndex=0 aria-controls=example class=sorting style="WIDTH: 158px" jQuery1113011434688335113913="9" tabindex="0" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending">Salary</TH></TR></THEAD> <TFOOT> <TR> <TH rowspan="1" colspan="1">Name</TH> <TH rowspan="1" colspan="1">Position</TH> <TH rowspan="1" colspan="1">Office</TH> <TH rowspan="1" colspan="1">Age</TH> <TH rowspan="1" colspan="1">Start date</TH> <TH rowspan="1" colspan="1">Salary</TH></TR></TFOOT> <TBODY> <TR role=row class=odd _DT_RowIndex="0"> <TD class=sorting_1>Tiger Nixon</TD> <TD>System Architect</TD> <TD>Edinburgh</TD> <TD>61</TD> <TD>2011/04/25</TD> <TD>$3,120</TD></TR></TBODY></TABLE> <DIV role=status id=example_info aria-live=polite class=dataTables_info class="dataTables_info">Showing 1 to 1 of 1 entries</DIV> <DIV id=example_paginate class="dataTables_paginate paging_simple_numbers"><A tabIndex=0 aria-controls=example id=example_previous class="paginate_button previous disabled" class="paginate_button previous disabled" jQuery1113011434688335113913="41" tabindex="0" data-dt-idx="0">Previous</A><SPAN><A tabIndex=0 aria-controls=example class="paginate_button current" class="paginate_button current" jQuery1113011434688335113913="45" tabindex="0" data-dt-idx="1">1</A></SPAN><A tabIndex=0 aria-controls=example id=example_next class="paginate_button next disabled" class="paginate_button next disabled" jQuery1113011434688335113913="49" tabindex="0" data-dt-idx="2">Next</A></DIV></DIV></DIV></BODY></HTML>

    what are this numbers after jQuery?
    if i add copy button then it is coming.
    could u plz let me know which method is responsible to display the excel button.
    nothing has come inside dt-buttons div

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0

    Dear Colin,
    One more info this whole html is getting rendered inside a frame.

    <FRAME onload=/javascript:changeTextStyle()/ marginHeight=10 src="xyz.jsp?TRNCODE=TxnMenu604&parentToChildCopyData=null&INSDataString=" name=display marginWidth=0 scrolling=yes resize="no">

    that xyz.jsp is the actual one with datatable.
    We are using data table since 2013.now we need to export the data so we are trying to ugrade libs and introduce html5 export buttons.
    Earlier it is perfectly working.
    But now we are not able to display excel button.
    Please help to resolve the problem.There should be somewhere code is written to introduce that button.in my case it is failing.

  • arijitrccmca2008arijitrccmca2008 Posts: 9Questions: 1Answers: 0
    edited August 2018

    Dear Collin,
    Could u please check my last post.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    As I said before, without seeing the code working, it's hard to know what to suggest. At a glance, it looks as though the correct libraries. It would be worth running the debugger to verify that and to check for other problems.

    Cheers,

    Colin

This discussion has been closed.