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: https://stackoverflow.com/questions/54105541/how-to-make-html-table-column-editable?noredirect=1#comment95043446_54105541 — quirimmo, Jan 09 '19 at 08:56
yes i tried it but it make table column's name editable but not column cells — user, Jan 09 '19 at 08:57
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, Jan 09 '19 at 08:58
i do not understand what do you want to say. can you please show me hot to do it. — user, Jan 09 '19 at 09:02

score 2 · Answer 1 · answered Feb 03 '19 at 17:51

2

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

answered Feb 03 '19 at 17:51

shubham

771
7
18

Spaceploit · Answer 2 · 2022-01-19T13:07:58.913

If you want, for example, your startDate column to be editable, you need to init the Datatables like this so you can hit the column by class name:

{"data": "startDate", "className": "editable"},

then, with proper event handling

// Activate an inline edit on click of a table cell
$('#Table').on( 'click', 'tbody td.editable', function (e) {
    editor.inline( this );
} );

and initializing Editor you will be good:

editor = new $.fn.dataTable.Editor( {
    ajax: "../ajax/handle-data.php", // path to back-end data handling
    table: "#Table",
    fields: [ {
            label: "Start Date:",
            name: "startDate"
        }
    ]
} );

Also, don't forget to add this outside of document ready handler because you need it as a global var:

var editor;

Full example here (note that Datatables Editor feature is not free) https://editor.datatables.net/examples/inline-editing/columns.html

You can also code up your own completely free version, which is slightly more complicated, without using Editor, but still using class names so you can trigger on click events for specific columns.

How to make datatable specific column editable?

2 Answers2