How to make datatable specific column editable?

Question

There are various questions put up on this topic but I do not understand them so can anyone help here is my js code

 $(document).ready(function () {
    $('#myModal').toggle();
    var List = [];

    $.ajax({
        url: '/urls/' + id,
        type: 'POST',
        dataType: "json",
        data: 'data',
        success: function (data) {
            console.log("data length: ", data.length);
            console.log("data : ", data);

            for (var i = 0; i < data.length; i++) {

                var Logs = {};
                Logs.Info = data[i].Info;
                for (var j = 0; j < Logs.Info.length; j++) {
                    var emplist = {};
                    emplist.Name = Logs.Info[j].Name;
                    emplist.dates = Logs.Info[j].dates;

                    for (var k = 0; k < emplist.dates.length; k++) {
                        var datelist = {};
                        datelist.Name = emplist.Name;
                        datelist.startDate = emplist.dates[k].startDate;
                        datelist.endDate = emplist.dates[k].endDate;
                        List.push(datelist);
                    }
                }

            }


            emptablee = $('#Table').DataTable({
                "data": List,
                "columns": [
                    {"data": "Name"},
                    {"data": "startDate"},
                    {"data": "endDate"},
                ],
                destroy: true,
                "scrollY": "200px",
                "scrollCollapse": true,
                "paging": false
            });
            /*emptablee.destroy();*/
        }

    });
    $("#close").on('click', function () {
        $("#myModal").hide();
    });


});

There are three columns in the table and I want to make a specific columns cell-like editable and show an input box and get the value edited to send.

use contenteditable="true" attribute on those cells. I just replied 20 mins ago to the same question: stackoverflow.com/questions/54105541/… — quirimmo
yes i tried it but it make table column's name editable but not column cells — user
what? that attribute makes the tag where you use it editable. it does not care where you use it. Move the attribute to the tag that you want to be editable — quirimmo
<th contenteditable="true" style="text-align: center" class="cell100 column1">Info</th> It does not work. — user
i do not understand what do you want to say. can you please show me hot to do it. — user

shubham shubham · Accepted Answer · 2019-02-03T17:51:49

For anyone checking this now, I've created a custom example in which you can make any column editable by just sending it in a metadata request from serverside.

here : https://github.com/sinhashubh/datatable-examples

How to make datatable specific column editable?

1 Answers