Редактируемые таблицы данных

Я использую Datatables, и все хорошо работает с возможностью редактировать простые данные, такие как Имена и т. Д., Что я пытаюсь понять, как я получаю, чтобы у меня был DateTime Picker и SELECT OPTION с ним.

У меня есть 2 столбца, которые я хочу редактировать, так как я говорю, что это DateTime, а другой я хочу добавить опцию SELECT.

Это мой код до сих пор, когда читал о них через DataTables-редактируемые не совсем понятно, как мне этого добиться, особенно когда мой Editable.js не похож на их.

Можете ли вы дать мне совет, как я могу добавить их обоих, чтобы моим конечным пользователям было проще обновлять информацию.

var oTable = $('#tobebookedtable').dataTable();
oTable.$('td').editable( '../../../includes/planning/plg_tobebooked_edit.php', {
tooltip: 'Click to edit...',
"callback": function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function (value, settings) {
return {
"row_id": this.getAttribute('id'),
"column": oTable.fnGetPosition(this)[2]
};
},
"height": "26px",
"width": "100%"});

Я пробовал с тестом SELECT ставить после "width": "100%" но это просто появилось в каждом столбце, когда вы нажимаете, чтобы редактировать

type : 'select',
style   : 'display: inline',
data : "{'A':'Test A','B':'Test B','C':'Test C'}"

Мой стол

<table class="table table-striped table-hover table-bordered" id="tobebookedtable">
<thead>
<tr>
<th>Address</th>
<th>Postcode</th>
<th>Planned</th>
<th>TimeSlot</th>
<th>ByWho</th>
</tr>
</thead>
<tbody>
<?php
$plg = db::getInstance()->query('CALL sp_tobebooked()');
foreach ($plg->results() as $plg) {
?>
<tr id="<?php echo $plg->ID; ?>">
<td><?php echo $plg->Address; ?></td>
<td><?php echo $plg->Postcode; ?></td>
<td id="<?php echo $plg->ID; ?>"><?php echo $plg->Planned; ?></td>
<td id="<?php echo $plg->ID; ?>"><?php echo $plg->TimeSlot; ?></td>
<td id="<?php echo $plg->ID; ?>"><?php echo $plg->ByWho; ?></td>
</tr>
<?php }; ?>
</tbody>
</table>

тестовый пример из совета TCHdvlp

$('#tobebookedtable').dataTable( {
//for each generated row
"createdRow": function( row, data, dataIndex ) {
//create the dropdown
var myDropDown = $('<select><option value=""></option><option value="Yes">Yes</option><option value="No">No</option></select>');
//bind this dropdown with the JS object used by dataTable
myDropDown.on("change",function(){
data.ByWho = $(this).val();
});
//inject this dropdown in the desired column
$(row).find("td:eq("+data.ByWho+")").html(myDropDown);
}
});