jQuery Datatable jEditable rafraîchissant la page

Question

J'utilise jQuery datatable et Jeditable pour éditer la première colonne de ma table. Jeditable fonctionne correctement car il met à jour la table db et affiche la valeur modifiée sur la table, mais seulement après l'actualisation de la page. Je veux qu'il soit mis à jour sans actualiser la page. Voici mon code:

JavaScript

$(document).ready(function() 
{ 
var objTable = $(".example").DataTable(
{ 
    "info": false, 
    "scrollCollapse": true, 
    "paging": false, 
    "order": [[ 1, "asc" ]] 
}); 

$('.edit').each(function() 
{ 

$(this).editable('UpdateDBTableURL', 
    { 

    'width' : '90%', 
    'height' : '80%', 
    'tooltip' : 'Click to Edit', 
    submit : 'Save', 
    cancel : 'Cancel', 
    cssclass : "editable", 
    'submitdata' : 
     { 
     'sCompanyID': CompanyID, 
     'sAction': 'EditLabel' 
     }, 
    'onClick' : 'submit' 

    }); 

}); 

}); 

HTML CODE

<table class="example" width="100%"> 
    <thead> 
    <tr> 
     <th>Label</th> 
     <th>Name</th> 
     <th>Address</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="edit" id="101">&nbsp;</td> 
     <td>Mary Kom</td> 
     <td>2401 N Main St</td> 
    </tr> 
    <tr> 
    <td class="edit" id="102"></td> 
    <td>David Kom</td> 
    <td>2401 N Main St</td>  
    </tr> 
</tbody> 
</table> 

Answer 1

Vous devrez peut-être affiner, mais j'utilisé la fonction DataTable createRow ajouter la jedit que la ligne est en cours de construction .

$(document).ready(function() { 
     var objTable = $(".example").DataTable(
     { 
      "info": false, 
      "scrollCollapse": true, 
      "paging": false, 
      "order": [[1, "asc"]], 
      "createdRow": function (row, data) { 

       $(row).children(":nth-child(1)").editable('UpdateDBTableURL', 
       { 

        'width': '90%', 
        'height': '80%', 
        'tooltip': 'Click to Edit', 
        submit: 'Save', 
        cancel: 'Cancel', 
        cssclass: "editable", 
        'submitdata': 
         { 
          'sCompanyID': CompanyID, 
          'sAction': 'EditLabel' 
         }, 
        'onClick': 'submit' 

       }); 
      } 
     }); 
    });