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.
arijitrccmca2008
Posts: 9Questions: 1Answers: 0
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.
This discussion has been closed.
Answers
It looks like you've got all the libraries you need commented out.
C
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.
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
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 ....
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
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.
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
Dear Collin ,
Can u help me please.
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
no success.
i am pasting the html which has generated in response
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
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.
Dear Collin,
Could u please check my last post.
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