可编辑的数据表

Question

I'm using Datatables and all works well with being able to edit simple data ie Names etc, what I'm trying to understand how I get it to have a DateTime Picker and SELECT OPTION with in it.

I have 2 columns that I want edit, as I say one being a DateTime and the other I want to add a SELECT Option.

This is my code so far, when reading about them through datatables-editable it isn't quite clear how I can achieve this especially when my Editable.js doesnt look anything like theirs.

Can you give me advice on how I can get them both to be added in, so it is easier for my end users to update the info.

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%"        
});

I tried with a test SELECT putting it after "width": "100%" but this just appeared in every column when you click to edit

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

My table

<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>

test example from TCHdvlp's advice

$('#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);
}
});

Answer 1

Here is how to achieve this. You don't need "editable.js". All is done with this option createdRow( row, data, dataIndex ) from dataTable plugin.

Here is to use it :

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

And your done !

If you want to initialise your dropdown/input/datepicker/whatever, you can do it in this same function. So you don't "erase" the data with .html()

...
var myDropDown = $("<select>").....
initMyDropdown(data.nameOfTheOptionAttribute)
...

Other example : transform simple data into editable field

$('#example').dataTable( {
    //for each generated row
    "createdRow": function( row, data, dataIndex ) {
        var price = data.price !=null ? data.price : 0;
        var inputPrice = $("<input type='text' class='editprice' value='" + price + "' />");
        inputPrice.on("blur",function(){
            data.price = $(this).val();
        });
        $(row).find("td:eq(" + indexOfColPrice + ")").html(inputPrice);
    }
});

Here there is the working example : http://jsfiddle.net/TCHdevlp/fq9e1z89/