Newbie Editor not editing misery
Newbie Editor not editing misery
toomanylogins
Posts: 5Questions: 2Answers: 0
I am familiar with data tables but not with the editor. I want to edit a single cell in a row. I have followed the example in the manual.
https://editor.datatables.net/examples/inline-editing/columns.html
But when I click on the cell the debugger is fired but I cannot edit. I would be grateful if somebody could put me out of my misery. Here is my code.
const editor = new DataTable.Editor({
ajax: '/admin/sale-invoice-datatable?',
fields: [
{
label: 'Total Allocated:',
name: 'allocatedAmount'
}
],
table: '#invoiceTable'
});
table.columns(9).search('').columns(10).search('').columns(1).search(companyID).columns(4).search('SINV').columns(12).search(status).draw();
});
const table = ltgObj('invoiceTable').DataTable({
initComplete: function () {
$('#invoiceTable_filter').addClass('d-none');
const companyID = ltgObj('sale.companyID').val();
const status = 'Posted';
table.columns(9).search('').columns(10).search('').columns(1).search(companyID).columns(4).search('SINV').columns(12).search(status).draw();
},
ajax: {
url: '/admin/sale-invoice-datatable?', // DEFAULT ON LOAD FOR EDIT NULL IF NEW
data: function (data) {
// META DATA...
// !IMPORTANT: SPECIFY TYPE FOR EACH COLUMN FOR SERVER-SIDE QUERIES
data.columnsMeta = [
{ type: 'text' }, // ID
{ type: 'text' }, //companyID
{ type: 'text' }, //select
{ type: 'text' }, // DATE
{ type: 'text' }, // TYPE
{ type: 'number' }, // NO
{ type: 'text' }, // REF
{ type: 'number' }, // TOTAL
{ type: 'number' }, // ALLOCATED
{ type: 'number' }, // DUE
{ type: 'number' }, // TAX
{ type: 'text' }, // TAXCDOE
{ type: 'text' } // STATUS
];
}
},
serverSide: true,
select: {
style: 'os',
selector: 'td:first-child'
},
columnDefs: [
{
targets: [0],
name: 'ID',
visible: false
},
{
targets: [1],
name: 'companyID',
visible: false
},
{
targets: [2],
// data: null,
defaultContent: '',
visible: true
},
{
targets: [3],
name: 'taxDate',
className: '',
visible: true
},
{
targets: [4],
name: 'transactionType',
},
{
targets: [5],
name: 'transactionNo',
},
{
targets: [6],
name: 'reference'
},
{
targets: [7],
name: 'totalAmount'
},
{
targets: [8],
name: 'totalDue',
className: 'text-center',
/// searchable: true,
visible: true
},
{
targets: [9],
name: 'parentAllocationAmount',
className: 'text-center',
visible: true
},
{
targets: [10],
name: 'allocatedAmount',
className: 'text-center',
visible: true
},
{
targets: [11],
name: 'taxAmount',
className: 'text-center',
visible: true
},
{
targets: [12],
name: 'status',
className: 'text-center',
visible: false
}
],
language: {
lengthMenu: 'Show _MENU_  '
},
order: [[2, 'asc']],
responsive: true,
pageLength: 5,
paging: true
});
// Activate an inline edit on click of a table cell
table.on('click', 'tbody td:not(:first-child)', function (e) {
debugger;
editor.inline(this);
});
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
You only have one field defined. A click on every other column should trigger this error. Clicking on column index 10 should trigger inline editing though.
Allan
Thanks for reply. I do get that error but onclick on col 10 it does not edit. That is the problem. Also tried this code to just allow click on col 10
table.on('click', 'tbody td:(:nth-child(10))', function (e) {
editor.inline(this);
});;
In inspector nothing appears to be attached to the elements. Is that correct
I am using this version
/*
* This combined file was created by the DataTables downloader builder:
* https://datatables.net/download
*
* To rebuild or modify this file with the latest versions of the included
* software please visit:
* https://datatables.net/download/#bs5/dt-2.0.5/e-2.3.2/r-3.0.2/sl-2.0.1
*
* Included libraries:
* DataTables 2.0.5, Editor 2.3.2, Responsive 3.0.2, Select 2.0.1
*/
No that is not correct. If you link to the page I'll take a look and debug it.
Allan
Thanks Allan I will setup a tunnel tomorrow if that ok.