Datatable - only want edit for two columns

sherin

I have five columns in datatable and I need to edit 2nd and third column only.

code :

$('#otable').on( 'click', 'tbody td:not(:first-child):not(:last-child)', function () {
}

Above one just escapes first and last, and now, the 2nd, 3rd and 4th column are editable. but I need only 2nd and 3rd column as editable. please help!

allan

Easiest option is probably just to add a class to the columns you do want to be editable - for example editable, which can be done with columns.className. Then your selector becomes a trivial class name selector.

Allan

sherin

Thanks Allan. I was trying to save inline and it is working fine, but something different from what I want. I want an edit button, clicking on that, it will call ajax with new values from the row of datatable.

Datatable:

Contact.DataTable = $('#otable').DataTable( {
"ajax": {
                "url" : '/Contact/' + Contact.id,
                "dataSrc": function(json) {
                      return json.data;
                },
             },
            "responsive": true,
            "columns": [
                { "data": "id"},
                { "data": "category", "sClass": "category" },
                { "data": "name", "sClass": "name" },
                { "data": "lname" },
                {
                      "render": function ( data, type, full, meta ) {
                       return Contact.saveContact(full);
                    }
                },
            ]
        } );  

Datatable - dropdown - inline edit:

        $('#otable tbody').on('click', '.category', function () {    //second column
            var row = this.parentElement;
            if(!$('#otable').hasClass("editing")){
                $('#otable').addClass("editing");
                var data = Contact.DataTable.row(row).data();
                var $row = $(row);
                 var thiscategory = $row.find("td:nth-child(2)");
                var thiscategoryText = thiscategory.text();
                thiscategory.empty().append($("<select></select>",{
                    "id":"category" + data[0],
                    "class":"in_edit"
                }).append(function(){
                    var options = [];
                    $.each(Categories, function(key, value){
                        options.push($("<option></option>",{
                            "text":value,
                            "value":value
                        }))
                    })
                    return options;
                }));
                $("#category" + data[0]).val(thiscategoryText)
            }
        });

Same above code for next 2 columns

For changing values in dropdown

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
            var val = $(this).val();
            $(this).parent("td").empty().text(val);
            $('#otable').removeClass("editing");
        });

 Below code for saving new values(after inline edit) while clicking save:


$('#divsave').on("click", ".saveContact", function() {
        var data = Contact.DataTable.row($(this).closest('tr')).data();
        // Here I have to get new values after inline editing  - but getting old values
    });

allan

I want an edit button, clicking on that, it will call ajax with new values from the row of datatable.

// Here I have to get new values after inline editing - but getting old values

Could you clarify if the problem is getting the latest values from the database before, or after, the edit. If after, the server should respond with the values - there should be no need for you to go and get the values yourself.

Allan

sherin

Hi Allan,

if the problem is getting the latest values from the database before, or after, the edit.

What I get:

1. I am getting values from database to show in datatable.
   eg:

1 'test1' 'address1'

1. By clicking one of the columns, it will show a dropdown where we can do inline editing(don't save to db just after editing)
   eg: after inline editing

1 'test2' 'address2'

1. By clicking save button, it is getting the old values from the row of datatable
   ie, getting => 1 'test1' 'address1'

What I need :

1. I am getting values from database to show in datatable.
   eg:

1 'test1' 'address1'

1. By clicking one of the columns, it will show a dropdown where we can do inline editing.

1 'test2' 'address2'

1. By clicking save button, I need to get values after inline editing -> these values will save in database by an ajax call
   have to get values => 1 'test2' 'address2'

sherin

Managed to come with screenshots here:

Table before :
http://prntscr.com/84hc32

Table at the time of editing:
http://prntscr.com/84hc8y

Table after editing:
http://prntscr.com/84hcgr

What I need :
http://prntscr.com/84hclh

allan

I don't understand this point I'm afraid:

don't save to db just after editing

Editor will always submit edits to the server once the edit is complete. There is no option to queue submissions.

Thanks for the image links, but unfortunately they appear to have been removed or expired. Can you link them again please.

Allan

Allan

sherin

Hi Allan,

I want to:
edit the columns of one row - there will be a button in the row - while clicking it, that will save all modified column values in that row.

Modified the image links

sherin

Hi Allan,

help on this please.

I also tried

$('#otable tbody').on("change", ".in_edit", function(){   
            var val = $(this).val();
            $(this).parent("td").empty().text(val);
            // Below for refreshing datatable
            Contact.DataTable.row($(this).parent("tr")).invalidate();  
            $('#otable').removeClass("editing");
        });

allan

that will save all modified column values in that row.

There is no option for this in Editor at the moment. It cannot queue edits - if you make an edit and want it to be saved, it must be submitted immediately. Since inline editing is only possible on a single cell at a time, each cell would need to be saved individually.

Allan

sherin

Thanks Allan,

Is there any method to save all details in one save button? seems that also works for me.

ie,

I have a table with four columns -

ID Name Couse Category
1 Amy Science Chemistry
2 Bobby Maths Maths

The enabled inline editing for 3rd and 4th columns. By clicking third, it will display a dropdown and by clicking 4th it will display a text field.

There is a button at the bottom of table that saves every modified data in datatable. Is there any possibility for this method?

http://prntscr.com/85y8h7

allan

No - as I say, only a single filed can be edited inline at a time, at the moment, so they would need to be displayed and saved individually. This is something that I plan to address in a future version of Editor, but it isn't available yet I'm afraid.

Allan

sherin

Allan,

I am only using datatables, not editor plugin. And following are the handy code that I ahve used for inline editing:

I am not sure is there any other method for inline editing to make this happen.

allan

You can use any method you want to make inline editing happen. If that one works for you, go with that. External code is not something I can offer support for.

Allan

sherin

Oh ok. Could you please help me to get all data from datatables? On clicking save button I need to get every row details (that are modified)

allan

get all data from datatables

data() or rows().data().

Allan