Apologies for all the code in this post, but I don't know how else to describe it.
I have some Javascript, which is in a Vue component (the component is to encapsulate a Datatable):
let table = $('#datatables-table').DataTable({
"ajax": {
"url": self.dataUrl,
"type": "POST",
"data": function(d){
d.table = self.table;
},
},
"columns": self.tableColumns,
order: [1, 'asc'],
dom: "Bfrtip",
responsive: false,//true wont let me hide columns
"scrollY": "600px",
"scrollCollapse": true,
"paging": false,
select: {
style: 'single',
selector: 'td:first-child',
blurable: true
},
buttons: self.buttons,
});
I am trying to pass the buttons (self.buttons) configuration in, this is what I want it to look like:
[{extend:'remove', editor: editor},{extend:'create', editor: editor},{extend:'edit', editor: editor},],
The variables get populated, in my mounted method. via AJAX:
axios.get(self.tableUrl)
.then(function (response) {
self.tableHeaders = response.data.tableHeaders;
self.panelTitle = response.data.panelTitle;
self.table = response.data.table;
self.editorFields = response.data.editorFields;
self.tableColumns = response.data.tableColumns;
self.buttons = response.data.buttons;
This is the PHP (Laravel), to form the response:
$dt->buttons = array(
array('extend' => 'remove', 'editor' => 'editor'),
array('extend' => 'create', 'editor' => 'editor'),
array('extend' => 'edit', 'editor' => 'editor')
);
Then I do a JSON.stringify in the JS, but the problem here is that I end up with this:
"[{"extend":"remove","editor":"editor"},{"extend":"create","editor":"editor"},{"extend":"edit","editor":"editor"}]"
So, how can I pass the buttons in, so that they are not a string and the editor is not "editor",
Mick
via Mick
