Datatable - only want edit for two columns

Datatable - only want edit for two columns

sherinsherin Posts: 18Questions: 1Answers: 0

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!

Replies

  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0
    edited August 2015

    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
        });
    
  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0
    edited August 2015

    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'
  • sherinsherin Posts: 18Questions: 1Answers: 0
    edited August 2015

    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

  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0
    edited August 2015

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0

    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");
            });
    
    
  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0
    edited August 2015

    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

  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0
    edited August 2015

    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.

  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    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

  • sherinsherin Posts: 18Questions: 1Answers: 0

    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)

  • allanallan Posts: 48,114Questions: 1Answers: 6,924 Site admin

    get all data from datatables

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

    Allan

This discussion has been closed.