Butons Example not working
Butons Example not working
davidcfk
Posts: 3Questions: 1Answers: 0
Hello, I tried the following piece of code below but couldn't get a simple datatable up and running with buttons showing. I've tried in a few browsers already, none of them showed (I was using Mac at the time, Safari, FIrefox and Chrome failed to show). This example was pretty much pulled from demo code, and the list of js and css files are placed as per the notes next to the code snippets...
Is there something wrong with the buttons script/css that is being hosted? (It looks pretty small...)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js "></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
</head>
<body>
<table id="tableTest" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]
table = $("#tableTest").DataTable({
buttons: [
'copy'
],
select: true
});
</script>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I found two things wrong...
1) You have to wrap your JS in
2) You need to specify the
domproperties for DataTables:dom: 'Bfrtip'Got a working example with your exact code on live.datatables.net, just had to wrap the JS in the document.ready and add the dom
http://live.datatables.net/cowesiji/1/
http://live.datatables.net/cowesiji/1/edit
Perfect, it works :)
Awesome!