Different source for select input
Different source for select input
![awa1271](https://secure.gravatar.com/avatar/09b7a2ceb522e3663e90b88f18a164a0/?default=https%3A%2F%2Fvanillicon.com%2F09b7a2ceb522e3663e90b88f18a164a0_200.png&rating=g&size=120)
Hi all... First things first, I'm not a professional developer. As an apology in advance
My basic setup works. The API delivers data, the datatable is generated and updating the records is working too.
What I'm trying to do is, that the email field is a selectbox and the selectbox options are generated from each contacts array.
I'm using the following code:
const editor = new DataTable.Editor({
ajax: 'api/unit_update',
idSrc: 'id',
fields: [
{
label: 'Date:',
name: 'appointment_date',
type: 'datetime',
opts: {
showWeekNumber: true,
disableDays: [0, 6]
},
def: () => new Date(),
displayFormat: 'DD.MM.YYYY',
wireFormat: 'YYYY-MM-DD',
keyInput: false
},
{
label: 'Time:',
name: 'appointment_time',
type: 'datetime',
def: () => new Date(),
displayFormat: 'HH:mm',
wireFormat: 'HH:mm:ss',
keyInput: false
},
{
label: 'Contact email:',
name: 'email',
},
],
table: '#example'
});
$(document).ready(function() {
var groupColumn = 0;
var table = $('#example').DataTable({
ajax: {
url: 'api/units',
},
rowId: 1,
paging: false,
processing: true,
serverSide: true,
order: [
[0, 'asc']
],
columns: [
{
data: 'date',
format: 'DD.MM.YYYY',
},
{
data: 'time',
format: 'HH:mm',
},
{
data: 'serial'
},
{
data: 'email',
},
{
data: null,
className: 'dt-center editor-edit',
defaultContent: '<button class="btn dataedit btn-outline-default btn-xs btn-icon rounded-circle waves-effect waves-themed"><i class="fa fa-pencil"/></button>',
orderable: false
}
],
layout: {
topStart: {
buttons: [{
extend: 'edit',
editor: editor
},
{
extend: 'remove',
editor: editor,
}
]
}
},
});
table.on('click', 'button.dataedit', function(e) {
editor.edit(e.target.closest('tr'), {
title: 'Edit record',
buttons: 'Update'
});
});
});
Array
(
[data] => Array
(
[0] => Array
(
[id] => 89
[date] => 2024-04-25
[time] => 08:00:00
[email] => test@test.com
[serial] => XX-1234-5678
[contacts] => Array
(
[0] => Array
(
[id] => 24767
[phone] => +0123456
[email] => test1@xxxx.com
)
[1] => Array
(
[id] => 45547
[telefon] => +0641488
[email] => test2@xxxx.com
)
)
)
[1] => Array
(
[id] => 245
[date] => 2024-08-27
[time] => 09:00:00
[email] => another@mail.com
[serial] => YY-999-888
[contacts] => Array
(
[0] => Array
(
[id] => 13363
[phone] => +055847984
[email] => test3@yyyy.com
)
[1] => Array
(
[id] => 45547
[telefon] => +0119975
[email] => test4@yyyy.com
)
)
...
I tried to do it like shown in this example (Complex (nested) JSON data source), but a) I have several emails stored in contacts and b) I can't access my data like contacts.email.
Any idea or hint is welcome.
Thanks.
This question has an accepted answers - jump to answer
Answers
Interesting one! So the possible options for the
email
field are available, in the row as thecontacts
array?That being the case, use the
initEdit
event to update the list of options with thefield().update()
method - e.g.:You may wish to change the value to
d.email
as well since it looks like email field is the email address string rather than the id entry.Allan