Buttons not displaying
Buttons not displaying
JohnBrooking
Posts: 6Questions: 1Answers: 0
Sorry in advance to ask a very common newbie question, but I did search the forums and didn't find anything that helped.
In an attempt to figure out why my buttons are not showing, I put together a very simple client-only HTML page, shown below, and am running it in Internet Explorer 11. I also confirmed that the following files (among many others) are present in directories underneath the location of the HTML page:
- Scripts/jquery-3.1.1.js
- Scripts/DataTables/jquery.dataTables.js
- Scripts/DataTables/dataTables.buttons.min.js
- Content/DataTables/css/jquery.dataTables.css
- Content/DataTables/css/buttons.dataTables.min.css
The rest of the table functionality is working fine, it's just that the buttons are not showing. Any troubleshooting ideas are greatly appreciated.
P.S. Regarding the DataTables debugger, it's not clear to me how to use this with IE 11, since its debug console does not give me an opportunity to paste anything into it. I also searched for and couldn't find any further information on that in the forums.
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type='text/javascript' src='Scripts/jquery-3.1.1.js'></script>
<!-- JS/CSS library for jQuery.DataTable -->
<script type='text/javascript' src='Scripts/DataTables/jquery.dataTables.js'></script>
<link href='Content/DataTables/css/jquery.dataTables.css' rel='stylesheet' type='text/css' />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#MyTable').DataTable ({
order: [[1, 'asc' ]],
dom: 'Bflrtip',
buttons: [ 'csv', 'excel' ]
});
});
</script>
</head>
<body>
<h1>Export Test</h1>
<div style='width: 400px;'>
<table id='MyTable' style='border: 1px solid black;'>
<thead style='background-color: #DDD;'>
<tr><td>ID</td><td>First</td><td>Last</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>Carol</td><td>Morin</td></tr>
<tr><td>2</td><td>Jason</td><td>Toothaker</td></tr>
<tr><td>3</td><td>John</td><td>Brooking</td></tr>
<tr><td>4</td><td>Isaac</td><td>Oyinlade</td></tr>
<tr><td>5</td><td>Rob</td><td>MacDonald</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Answers
I don't see where you are loading the buttons JS and CSS files in your HTML. You also need JSZip for the Excel button. You can use the Download Builder to get the exact files needed.
Kevin
Ah, that's probably it. I didn't realize a separate include was necessary. I'm out of time for today, but I'll look at that tomorrow. Thanks.
Might also be worth having a look at the download builder which can make it a little easier to include all the files you need.
Allan
Okay, I used the download builder to get the files, but that still doesn't address the question that kthorngren suggested to me, which is how to load them into my page. I'm loading dataTables.buttons.js and buttons.dataTables.css with the following statements, after the jQuery script and link tags, and I have verified that dataTables.buttons.js is being found by putting an alert statement in it, but I still see no buttons.
Looks like you are still missing some files like Flash or HTML5 and JSZip for Excel. The Download Builder can be used for these files too.
Kevin
I'm using the download method to get the files. I'm unzipping the contents directly into a "DataTables" directory just underneath where my document is. I'm opening the document in IE 11 using the File Open function. My document is "C:\Users\adm-jwbrooking\Documents\TFS\Somerset Manufacturing Applications\SomOperationsWeb-CommunicationsHub\Tests\Hello.html".
Here is a picture the options I'm choosing (only the ones I checked):
Here is the file listing after I've put it in a "DataTables" directory under my document directory (Is it appropriate/required to leave the folders named with the version number?):
And here the file listing for the Scripts directory that has an existing installation of jQuery 3.1.1:
Still the same result: the table works, but there are no buttons.
And again, here are my declarations, and I've added an alert to DataTables/Buttons-1.5.1/js/dataTables.buttons.js to make sure it's being found, and it is.
Sorry I was confused by the fact you downloaded concatenated include files. The concatenated datataables.js and datatables.css files include buttons and the additional html5, jszip, etc. You only want to load these two files. Sounds like you are also loading dataTables.buttons.js and buttons.dataTables.css in addition. This means that you are loading buttons twice which might be causing the problem. Try removing dataTables.buttons.js and buttons.dataTables.css.
Kevin
Sorry, removing those last two includes still didn't do it.
Change of strategy: I'm trying to use the debugger as directed at http://debug.datatables.net/. As I said originally, this doesn't seem to be possible with IE 11 because it doesn't have way to type commands into the debug console (that I can find). We also have Chrome installed on this server, so I tried it there, but got the attached response. Maybe that's not working because I running the page from my hard drive using the file:// protocol rather than http?
I'm not sure what the problem would be. Does the environment you are working on have access to the internet?
If so try removing all your Datatables include files except jQuery. Try the following CDN I generated using the Download Builder:
I copied the same along with your DT config into this example:
http://live.datatables.net/lonoruxi/1/edit
The example works.
Kevin
Yes. I'll update the debugger to always use https rather than a relative protocol.
Allan