Datatable, Ajax, Jquery, Json come aggiornare "al volo" una cella

[Petermessy]

Buongiorno a tutti,
ho un problema con una Datatable. Riesco a popolarla pi� o meno bene, ogni riga di questa tabella ha dei bottoni che dovrebbero gestire un CRUD. Vi posto il codice che gestisce l'intera tabella

$('#example').DataTable( {    
                        "scrollY":"200px",
                        
                        columns: [
                                  { title: "Id" , className: "id" },
                                  { title: "Name" , className: "nome" },
                                  { title: "Surname" , className: "cognome"},
                                  { title: "Username" , className: "username" },
                                  { title: "Password" , className: "password"},
                                  { title: "Deleted" , className: "deleted"},
                                  { title: "Ruolo" , className: "ruolo"},
                                  {
                                     title: "Actions",
                                     className: "action",
                                     defaultContent: '
<input type="button" id="editor_edit"name="editBtn" value="Edit" /> 
<input type="button" id="editor_modify" name="modifyBtn" value="Modify" /> 
<input type="button" class="editor_delete" id="editor_delete" name="deleteBtn"  />'
                                     }
                        ],
                        
                        });    
                    var t = $('#example').DataTable();
                        t.clear();
                        
                    $.map( resp, function( item ) {
                         t.row.add( [
                                     item.id,
                                     item.nome,
                                     item.cognome,
                                     item.username,
                                     item.password,
                                     item.deleted,
                                     item.ruolo
                                     ] ).draw();
                                     
          var btn=document.getElementById("editor_delete");
      $("#editor_delete").prop('id', 'editor_delete'+counter);
      counter++;
       });


                        var table = $('#example').DataTable(); 
                        table
                            .column( 5 )
                            .data()
                            .each( function ( value, index ) {
                                if (value==0){
                                    $("#editor_delete"+index).prop('value', 'Disable');            
                                }
                                if (value==1){
                                    $("#editor_delete"+index).prop('value', 'Enable');
                                    }
                            } );


                    $('#example tbody').on('click',".editor_delete",function() {
                        var table = $('#example').DataTable();
                         var data = table.row( $(this).parents('tr') ).data();
                         var JSONObj =     {              "id":data[0], 
                                            "nome":data[1],
                                            "cognome":data[2],
                                            "username":data[3],
                                            "password":data[4],
                                            "deleted":data[5],
                                            "ruolo":data[6]
                                };
                            $.ajax({
                                url:  'AdminController',
                                type: 'POST',
                                dataType:'JSON',
                    data : { user : JSON.stringify(JSONObj), action:"deleteUserAdmin" },
                                success: function (item){
                                    var table = $('#example').DataTable();
                                    
                                    table.ajax.reload( function ( item ) {
                                        table.row().column( 5 )
                                        $('.deleted').val( item.deleted );

Bene. L'idea era quella che al click del button "Enable/Disable" (il cui "value" era comandato dal valore del campo "deleted" di ogni row) si attivasse un ajax (che doveva aggiornare lato server il suddetto campo, e su questo ci siamo!) e parallelamente a questo, aggiornare lo stesso campo sulla datatable (se 0-->1 oppure se 1-->0 ).
Come si vede ho provato a fare un reload della tabella che non funziona per nulla! Supponendo che "item", al success dell'ajax, abbia esattamente tutti i valori dei campi della row corrispondente al button, come potrei attivare una modifica al "volo" di un campo/cella ("deleted", in questo caso) della datatable? Grazie a chi si interessera'!

[Vindav]

https://legacy.datatables.net/ref#fnUpdate

[Petermessy]

https://legacy.datatables.net/ref#fnUpdate

Grazie!!!

[Petermessy]

E se volessi permettere l'EDIT in ogni "cell" o in una certa row? Cosa potrei utilizzare? Sempre grazie.

[Vindav]

il plugin mette a disposizione tre diverse modalità di editing( la primary può coesistere con la bubble o la inline ):

primary editing -> questo meccanismo di editing prevede per ogni riga un checkbox, ed un bottone a se stante. Una volta selezionato il checkbox della riga interessata cliccando il bottone verrà mostrata una finestra modale(div in sovrimpressione) dove è possibile modificare i dati della riga.

bubble editing -> basta cliccare sulla cella interessata, verrà mostrata una finestra modale dove è possibile modificare il dato della cella.

inline editing -> basta cliccare sulla cella interessata, al click la label che contiene il dato da modificare diventa una casella di testo dove si puo apportare la modifica.

https://editor.datatables.net/exampl...ng/simple.html (primary+bubble)
https://editor.datatables.net/exampl...ng/simple.html (primary+inline)

[Petermessy]

il plugin mette a disposizione tre diverse modalità di editing( la primary può coesistere con la bubble o la inline ):

primary editing -> questo meccanismo di editing prevede per ogni riga un checkbox, ed un bottone a se stante. Una volta selezionato il checkbox della riga interessata cliccando il bottone verrà mostrata una finestra modale(div in sovrimpressione) dove è possibile modificare i dati della riga.

bubble editing -> basta cliccare sulla cella interessata, verrà mostrata una finestra modale dove è possibile modificare il dato della cella.

inline editing -> basta cliccare sulla cella interessata, al click la label che contiene il dato da modificare diventa una casella di testo dove si puo apportare la modifica.

https://editor.datatables.net/exampl...ng/simple.html (primary+bubble)
https://editor.datatables.net/exampl...ng/simple.html (primary+inline)

Sei stato gentilissimo ed esauriente! Grazie tante! Ora mi metto a lavoro!