Editor not working
Editor not working
kos406
Posts: 4Questions: 0Answers: 0
I use magento 2. I try to connect datatablesEditor.
file requirejs-config.js :
var config = {
deps: [
"js/jquery.dataTables.min",
"js/dataTables.editor.min",
],
paths: {
"datatables.net": "js/jquery.dataTables.min",
},
};
file .phtml:
<script>
require([
'jquery',
'js/jquery.dataTables.min',
'js/dataTables.editor.min',
], function ($) {
$(document).ready(function () {
var editor;
var testdata = {
"data": <?=$block->getItems()?>
};
editor = new $.fn.dataTable.Editor( {
data: testdata.data,
table: '#table-upload',
fields: [
{ label: 'reference', name: 'reference' },
{ label: 'product_title', name: 'product_title' },
{ label: 'shape', name: 'shape' },
{ label: 'colour', name: 'colour' },
{ label: 'clarity', name: 'clarity' },
{ label: 'cut', name: 'cut' },
{ label: 'carat', name: 'carat' },
{ label: 'price', name: 'price' },
],
select: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
} );
$('#table-upload').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
function format(d) {
return '<table class="child-table">' +
'<tr>' +
'<td class="name-attr">Reference</td>' +
'<td>' + d.reference + '</td>' +
'<td class="name-attr">Shape</td>' +
'<td>' + d.shape + '</td>' +
'<td class="name-attr">Carats</td>' +
'<td>' + d.carat + '</td>' +
'<td class="name-attr">Price/CT</td>' +
'<td>' + d.rap_price + '</td>' +
'<td class="name-attr">ASK,%</td>' +
'<td>' + d.stone_rapnet_discount_pct + '</td>' +
'<td class="name-attr">Total</td>' +
'<td>' + d.total + '</td>' +
'</tr>' +
'<tr>' +
'<td class="name-attr">Color</td>' +
'<td>' + d.color + '</td>' +
'<td class="name-attr">Clarity</td>' +
'<td>' + d.clarity + '</td>' +
'<td class="name-attr">Lab</td>' +
'<td>' + d.lab + '</td>' +
'<td class="name-attr">PRO/CUT</td>' +
'<td>' + d.pro_cut + '</td>' +
'<td class="name-attr">Fin/Pol</td>' +
'<td>' + d.fin_pol + '</td>' +
'<td class="name-attr">Symmetry</td>' +
'<td>' + d.symmetry + '</td>' +
'</tr>' +
'<tr>' +
'<td class="name-attr">Flu</td>' +
'<td>' + d.flu + '</td>' +
'<td class="name-attr">Table</td>' +
'<td>' + d.table_pct + '</td>' +
'<td class="name-attr">Crown</td>' +
'<td>' + d.crown_depth + '</td>' +
'<td class="name-attr">Pavilion</td>' +
'<td>' + d.pavilion + '</td>' +
'<td class="name-attr">Total Depth</td>' +
'<td>' + d.total_depth + '</td>' +
'<td class="name-attr">Crown Angle</td>' +
'<td>' + d.crown_angle + '</td>' +
'</tr>' +
'<tr>' +
'<td class="name-attr">Pavilion angle</td>' +
'<td>' + d.pavilion_angle + '</td>' +
'<td class="name-attr">Girdle</td>' +
'<td>' + d.girdle_thin + '</td>' +
'<td class="name-attr">Culet</td>' +
'<td>' + d.culet + '</td>' +
'<td class="name-attr">Measurements</td>' +
'<td>' + d.measurments + '</td>' +
'<td class="name-attr">CertNum</td>' +
'<td>' + d.certnum + '</td>' +
'<td class="name-attr">Country region code</td>' +
'<td>' + d.country + '</td>' +
'</tr>' +
'<tr>' +
'<td class="name-attr">Remarks</td>' +
'<td>' + d.remarks + '</td>' +
'</tr>' +
'</table>';
};
var table = $('#table-upload').DataTable({
data: testdata.data,
searching: false,
ordering: false,
info: false,
lengthMenu: [15, 30, 50, 75, 100],
columns: [
{
"data": null,
"render": function () {
return '<input class="remove-item-flag" type="checkbox" /><div class="custom-checkbox"></div>';
},
"width": '1px',
},
{"data": "reference"},
{"data": "product_title"},
{"data": "shape"},
{"data": "colour"},
{"data": "clarity"},
{"data": "cut"},
{"data": "carat"},
{"data": "price", "className": 'price',}
],
initComplete: function () {
$('#table-upload_length select').addClass('custom-select');
$('.custom-select').select2();
}
});
});
});
</script>
This discussion has been closed.
Replies
Hi @kos406 ,
When you say "it doesn't work" - it doesn't give us a lot to go on! You haven't said what the behaviour is, or whether you're seeing errors in the DB or the PHP or the client. Can you elaborate, and if possible, send us a link to your page?
Thanks,
Colin
Hi,@colin
There are no errors in the console and database. When you connect to the “js / dataTables.editor.min” request, the values are simply not displayed if you delete the “js / dataTables.editor.min” line from the request, and the editor initialization then everything works.
One issue that stands out is you have some Datatabales init code in your Editor init code:
the
selectandbuttonsoptions need to be moved into your Datatables init code.Maybe start with looking at the examples of the features you want to use:
https://editor.datatables.net/examples/index
Kevin
Hi, @kthorngren
I saw this error and corrected it. The problem is clearly not the case, but thanks for the answer.
Is it because the trial has expired perhaps? Or have you not purchased a license? I can't think of any other reason why it would fail like that. If you could link to the page, we're happy to take a look.
I use the free fifteen day version. Unfortunately, the page can not provide, because it happens locally on the computer
I'm not sure there is going to be much help we can offer here if we can't see the page and there are no errors being displayed in the console.
Simply including the "dataTables.editor.js" file on your page shouldn't cause it to simply not work without any errors. I can't think of anything that would cause that to happen in fact.
We really would need a link to the page or a test case on http://live.datatables.net or JSFiddle showing the issue.
Allan