How to make datatable specific column editable?

user_9662589 0
Viewed 3075

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.

datatable jquery ajax javascript
2 Answers
user_68629640

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.

user_16918230
Related