Getting context/full signature in a custom button action
Getting context/full signature in a custom button action
According to the buttons.action reference, button action functions should have the signature action( e, dt, node, config ) and be able to access the event, datatable, jqery, and configuration.
When I
1) I run the following code.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>Orders</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function () {
orders_editor = new $.fn.dataTable.Editor({
ajax: "/api_orders",
table: "#example",
fields: [{
label: "Order number:",
name: "orders.order_number"
},
{
label: "Customer",
name: "orders.customer",
type: "select",
},
],
});
orders_table = $('#example').DataTable(
{
ajax: "/api_orders",
dom: "Bfrtip",
columns: [
{ data: 'orders.order_number' },
{ data: 'contacts.name' },
],
select: true,
buttons: [
{
extend: "create", editor: orders_editor, formButtons: [
{
text: "Buttonbutton", action: function (e, dt, node, config) {
console.log(e)
console.log(dt)
console.log(node)
console.log(config)
}
}
]
},
],
},
);
});
</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>order_number</th>
<th>Customer</th>
</tr>
</thead>
</table>
</body>
2) click "new"
3) click "buttonbutton"
The console.logs for everything except "e" show as "undefined"
How can I access the datatable from within the function defined for the button's action?
Answers
You are referring to the wrong documentation. The
createdocs forformButtonsrefer to the Editor'sbuttons()andbutton-options. Thebutton-optionsdocs state this:See this example for accessing the Datatables API. It simply uses the
tablevariable assigned when the Datatable is initialized.Kevin