Editor buttons do not show
Editor buttons do not show
tzimmer
Posts: 1Questions: 1Answers: 0
Hi,
I've just started with datatables and editor. I've build a small example, datatables work fine, but I can't get the editor buttons to show up. Can anyone have a look at the code and point me to the right direction?
I do not get any errors or output in the developer console. All .js and .css files seem to load correctly.
Thanks in advance,
Thomas
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="/editor/css/editor.dataTables.min.css">
<script type="text/javascript" src="/editor/js/dataTables.editor.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready( function () {
editor = new $.fn.dataTable.Editor( {
ajax: '/company/json',
table: '#example',
fields: [
{ label: 'Name', name: 'name' },
{ label: 'Address', name: 'address' },
// etc
]
} );
$('#example').dataTable( {
dom: 'Bfrtip',
processing: true,
serverSide: true,
ajax: {
url: '/company/json',
type: 'POST'
},
columns: [
{ data: "id" },
{ data: "name" },
{ data: "address" },
{ data: "age" },
{ data: "action" }
],
select: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
} );
} );
</script>
<body>
<h1>TEST</h1>
<br><br>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>AGE</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You haven't included the Buttons js file.
https://datatables.net/extensions/buttons/