Editor- Selecting which fields are editable

keila_ortiz

I'm trying to follow the instructions here https://editor.datatables.net/examples/inline-editing/columns.html

My inline editor looks like this:

    $('#results_table').on( 'click', 'tbody td.editable', function (e) {
        editor.inline( this, {
          onBlur: 'submit'
        } );
    });

And the tables like this:

    var table = $('#results_table').DataTable( {
        dom: "Bfrtip",
        "processing": true,
        "ajax": {
            "url": 'all_json',
            "dataSrc": ""
        },

        "columns": [
                {className: 'details-control',
                  orderable: false,
                  data: null,
                  defaultContent: '',
                  width: "5%"
                },
                { "data": "search_results_id.notes.0.reviewed", className: 'editable', width:"5%" },
                { "data": "search_results_id.retrieved_on", width: "8%"},
                { "data": "search_term_id.example_ID.abbrev", width:"8%"},
                { "data": "search_term_id.example_ID._name", width:"10%"},
                { "data": "search_results_id.title" },
                { "data": "search_results_id.link" },
                { "data": "search_results_id.notes.0.j", className: 'editable'},
                { "data": "search_results_id.notes.0.n_related", className:'editable'},
                { "data": "search_results_id.notes.0.method"},
            ],

        columnDefs: [{
            targets : [1,7,8],
            "render": function(data){
              if (data == true){
                return '<input type="checkbox" name="" value="" checked>';
              } else {
                return '<input type="checkbox" name="" value="" >';
              }
            }
          },
        ], 
        keys: {
          columns: ':not(:first-child)',
          editor : editor
        },    
        select: {
          style : 'os',
          selector : 'td:first-child'
        },

        buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        //{ extend: "remove", editor: editor }
    ]
      });

All the columns are inline editable. I added to the css:

td.editable {
  font-weight: bold;
  background-color: blue;
}

The 'editable' class columns have a blue background, so I know the assignment of the class is working. However, I'm still able to inline edit all the columns that do not have the 'editable' class.

What am I missing in my code?

colin

Hi @keila_ortiz ,

As you say, everything looks alright. Is there another click event listener on those cells, perhaps? If you could link to your page, we can take a look. It's also working here as expected, if you could modify that to show the error, that would also be useful.

Cheers,

Colin