CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
blackandorangecat
blackandorangecat

Reputation: 1344

DataTables, add editable column

I need to add an editable column in my table. Here is how I am creating the table currently. The data is coming from a Javascript array, and is changing (which is why I have 'destroy: true' in the table definition). I want the QTY column to have a default of 1, but to allow the user to enter their own number - and then I need to be able to retrieve that value when the form is submitted.

var table2 = $('#example').DataTable( {
    select: false,
    data: addedRows,
    destroy: true, 
    columns: [
    { title: "ID" },
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" },
    { title: "QTY" }
    ],
    "columnDefs": [{
        className: "ID",
        "targets":[0],
        "visible": false,
        "searchable":false
    }],
    "language": {
        "emptyTable":     "Select items from the table above"
    }
});

Can anyone help me out? Both with creating an editable column, and with getting that data upon submission?

Thanks

Upvotes: 1

Views: 5452

Answers (2)

Abed Putra
Abed Putra

Reputation: 1215

I create a function to edit the column. But first, you need to add data-id for the id of the column also add class edit-tr to column editable. When you press the enter button, the column data will save to database.

This is the code:

var getId;
    var putOldValueBack;
    $(document).on("click","tr.odd td.edit-tr",function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $this = $(this);
        if ($this.data('editing')) return;
        var val = $this.text();
        getId = $(this).data("id");
        $this.empty();
        $this.data('editing', true);
        $('<input type="text" class="form-control editfield">').val(val).appendTo($this);
    });

    putOldValueBack = function () {
        $("tr.odd .editfield").each(function(){
            $this = $(this);
            var val = $this.val();
            var $td = $this.closest('td');
            $td.empty().html(val);
            $td.data('editing', false);
            $.ajax({
                url: "YOUR URL TO SAVE THE DATA",
                type: 'post',
                data : {id:getId,mentioned:val}, // add the param
                dataType: 'json'
            });
        });
    };

    $(document).click(function (e) {
        putOldValueBack();
    });

    $(document).on('keypress',function(e) {
        if(e.which == 13) {
            putOldValueBack();
        }
    });

Upvotes: 0

Andrei Zhytkevich
Andrei Zhytkevich

Reputation: 8099

There are 2 options:

  1. Use datatables plug-in https://editor.datatables.net/ (it's not free)

  2. Have inputs already in the table

Like this:

<table id="example">
    <tbody>
        <tr>
            <td><input type="text" value="value1" name="name1"></td>
            <!-- more cells-->
        </tr>
        <tr>
            <td><input type="text" value="value2" name="name2"></td>
            <!-- more cells-->
        </tr>
    </tbody>
</table>

Then the datatables will have inputs. When submitting you'll have to read variables name1...name#

Upvotes: 5

Related Questions